Effacement de <input type = 'file' /> à l'aide de jQuery


549

Est-il possible d'effacer une <input type='file' />valeur de contrôle avec jQuery? J'ai essayé ce qui suit:

$('#control').attr({ value: '' }); 

Mais ça ne marche pas.

Réponses:


529

Facile: vous entourez <form>l'élément, appelez reset sur le formulaire, puis supprimez le formulaire en utilisant .unwrap(). Contrairement aux .clone()solutions autrement dans ce fil, vous vous retrouvez avec le même élément à la fin (y compris les propriétés personnalisées qui y ont été définies).

Testé et fonctionne sous Opera, Firefox, Safari, Chrome et IE6 +. Fonctionne également sur d'autres types d'éléments de formulaire, à l'exception de type="hidden".

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

Comme le note Timo ci-dessous, si vous avez les boutons pour déclencher la réinitialisation du champ à l'intérieur du <form>, vous devez faire appel .preventDefault()à l'événement pour empêcher le <button>déclenchement d'une soumission.


ÉDITER

Ne fonctionne pas dans IE 11 en raison d'un bogue non corrigé. Le texte (nom de fichier) est effacé sur l'entrée, mais sa Fileliste reste remplie.


14
Gagnant! Fonctionne dans tous les navigateurs et évite le clonage du champ de saisie. Mais si les boutons clairs sont à l'intérieur du formulaire, veuillez renommer reset()par exemple. reset2(), car au moins dans Chrome, tous les champs sont effacés si tel est le cas reset(). Et ajoutez event.preventDefault () après avoir effacé l'appel pour empêcher la soumission. De cette façon: <button onclick="reset2($('#file'));event.preventDefault()">Reset file</button>. Exemple de travail: jsfiddle.net/rPaZQ/23 .
Timo Kähkönen

28
Le problème est que cela rend au moins temporairement le document invalide. (Les formulaires ne peuvent pas contenir d'autres formulaires.) Que cela fonctionne ou non, il est libre de rompre à tout moment.
cHao

6
@cHao, bien sûr, cela n'est vrai que si l'élément d'entrée est en fait sous une forme, ce qui n'est pas obligatoire.
Ninjakannon

7
En ce qui concerne la présence d'un formulaire dans un formulaire, vous pouvez toujours créer un nouvel élément de formulaire en dehors du DOM, ou l'ajouter au corps si vous le souhaitez, puis déplacer l'élément d'entrée à l'intérieur de ce formulaire. Ensuite, vous devez réinitialiser ce nouveau formulaire, déplacer l'élément d'entrée à l'endroit où il se trouvait et supprimer l'élément de formulaire supplémentaire.
Kevin Heidt

4
Je viens de découvrir que cela ne fonctionne pas dans IE 11. Nous utilisons le PixelFileInput - qui utilise cette approche. Et tandis que le texte et la miniature sont effacés, la liste des fichiers de l'objet reste la même :(
Ian Grainger

434

Réponse rapide: remplacez-le.

Dans le code ci-dessous, j'utilise la replaceWithméthode jQuery pour remplacer le contrôle par un clone de lui-même. Si vous avez des gestionnaires liés à des événements sur ce contrôle, nous voudrons également les conserver. Pour ce faire, nous passons truecomme premier paramètre de la cloneméthode.

<input type="file" id="control"/>
<button id="clear">Clear</button>
var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

Violon: http://jsfiddle.net/jonathansampson/dAQVM/

Si le clonage, tout en préservant les gestionnaires d'événements, présente tout problème que vous pourriez envisager d'utiliser la délégation d'événements pour gérer les clics sur ce contrôle à partir d'un élément parent:

$("form").on("focus", "#control", doStuff);

Cela évite d'avoir à cloner des gestionnaires avec l'élément lors de l'actualisation du contrôle.


50
Vous pouvez également utiliser la méthode .clone () sur le champ $ ('# clone'). ReplaceWith ($ (this) .clone ());
metric152

4
Il ne fait rien du tout - aucune erreur dans Firebug. J'ai dû ajouter control.val (''); pour effacer la zone de saisie du fichier. Votre code a bien fonctionné en chrome et ie9.
mnsr

10
Ça ne marche toujours pas. Il doit être effacé avant le remplacement. Donc, vous voudriez .val () avant .replaceWith (). Ce serait donc control.val (''). ReplaceWith (...);
mnsr

6
J'ai une solution ci-dessous beaucoup plus propre que celle-ci: stackoverflow.com/a/13351234/909944
slipheed

2
cette réponse est ici pour des raisons historiques. support des navigateurs modernesinput.value = null;
André Werlang

113

Jquery est censé prendre en charge les problèmes de navigateur / navigateur plus ancien pour vous.

Cela fonctionne sur les navigateurs modernes que j'ai testés: Chromium v25, Firefox v20, Opera v12.14

Utilisation de jquery 1.9.1

HTML

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

Jquery

$("#clear").click(function () {
    $("#fileopen").val("");
});

Sur jsfiddle

La solution javascript suivante a également fonctionné pour moi sur les navigateurs mentionnés ci-dessus.

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

Sur jsfiddle

Je n'ai aucun moyen de tester avec IE, mais cela devrait théoriquement fonctionner. Si IE est suffisamment différent pour que la version Javascript ne fonctionne pas parce que MS l'a fait d'une manière différente, la méthode jquery devrait à mon avis s'en occuper pour vous, sinon il serait utile de le signaler à l'équipe jquery avec le qu'IE requiert. (Je vois des gens dire "cela ne fonctionnera pas sur IE", mais pas de javascript vanille pour montrer comment cela fonctionne sur IE (soi-disant une "fonction de sécurité"?), Peut-être aussi le signaler comme un bug à MS (s'ils le faisaient compter comme tel), afin qu'il soit corrigé dans toute nouvelle version)

Comme mentionné dans une autre réponse, un post sur le forum jquery

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

Mais jquery a désormais supprimé la prise en charge des tests du navigateur, jquery.browser.

Cette solution javascript a également fonctionné pour moi, c'est l'équivalent vanille de la méthode jquery.replaceWith .

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Sur jsfiddle

La chose importante à noter est que la méthode cloneNode ne conserve pas les gestionnaires d'événements associés.

Voir cet exemple.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Sur jsfiddle

Mais jquery.clone offre cela [* 1]

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Sur jsfiddle

[* 1] jquery est capable de le faire si les événements ont été ajoutés par les méthodes de jquery car il conserve une copie dans jquery.data , cela ne fonctionne pas autrement, donc c'est un peu une triche / solution de contournement et signifie que les choses ne sont pas compatible entre différentes méthodes ou bibliothèques.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Sur jsfiddle

Vous ne pouvez pas obtenir le gestionnaire d'événements attaché directement à partir de l'élément lui-même.

Voici le principe général de vanilla javascript, c'est ainsi que jquery et toutes les autres bibliothèques le font (grosso modo).

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

Sur jsfiddle

Bien sûr, jquery et d'autres bibliothèques ont toutes les autres méthodes de support nécessaires pour maintenir une telle liste, ceci n'est qu'une démonstration.


Cela marche! (enfin au moins le bit JS vanille au début de cette réponse). J'ai testé cela dans les derniers Chrome, Firefox et IE (11).
PhilT

4
J'étais sur le point d'ajouter certaines de vos mêmes réponses, mais surtout cela .val(''). N'est-ce pas simplement plus simple que de cloner l'élément de téléchargement ou d'ajouter un formulaire imbriqué? +1.
Erenor Paz

3
La première solution JQuery (utilisant .val("")) a parfaitement fonctionné, merci. Beaucoup plus simple que de cloner l'entrée et de la remplacer également.
Hugo Zink

51

Pour des raisons de sécurité évidentes, vous ne pouvez pas définir la valeur d'une entrée de fichier, même sur une chaîne vide.

Tout ce que vous avez à faire est de réinitialiser le formulaire où le champ ou si vous souhaitez uniquement réinitialiser l'entrée de fichier d'un formulaire contenant d'autres champs, utilisez ceci:

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

Voici un exemple: http://jsfiddle.net/v2SZJ/1/


6
Ne fonctionne pas correctement dans IE. Visuellement, la valeur est réinitialisée, mais el.value signale toujours la version précédente. Il permet de réinitialiser la valeur el, mais uniquement dans IE10 +. jsfiddle.net/9uPh5/2
gregor

2
Même solution que ci
PhilT

2
C'est faux, nous ne pouvons pas définir le champ à une valeur donnée mais nous espérons que nous pourrons l'effacer.
fralbo


20

Dans IE8, ils ont rendu le champ Téléchargement de fichiers en lecture seule pour des raisons de sécurité. Voir le blog de l'équipe IE :

Historiquement, le contrôle de téléchargement de fichiers HTML () a été à l'origine d'un nombre important de vulnérabilités de divulgation d'informations. Pour résoudre ces problèmes, deux modifications ont été apportées au comportement du contrôle.

Pour bloquer les attaques qui reposent sur le «vol» de touches pour tromper subrepticement l'utilisateur en tapant un chemin de fichier local dans le contrôle, la zone d'édition Chemin de fichier est désormais en lecture seule. L'utilisateur doit sélectionner explicitement un fichier à télécharger à l'aide de la boîte de dialogue Parcourir les fichiers.

De plus, l'URL «Inclure le chemin du répertoire local lors du téléchargement de fichiers» a été définie sur «Désactiver» pour la zone Internet. Cette modification empêche la fuite d'informations du système de fichiers local potentiellement sensibles sur Internet. Par exemple, au lieu de soumettre le chemin complet C: \ users \ ericlaw \ documents \ secret \ image.png, Internet Explorer 8 soumettra désormais uniquement le nom de fichier image.png.


16

$("#control").val('')est tout ce dont vous avez besoin! Testé sur Chrome à l'aide de JQuery 1.11

D'autres utilisateurs ont également testé dans Firefox.


2
Comme de nombreux autres articles ici l'expliquent, ce n'est pas compatible avec tous les navigateurs.
Tisch

Pour ma compréhension, dans quels navigateurs cela échoue-t-il?
TheHamstring

1
Échoue dans Internet Explorer car le fichier de type d'entrée est en lecture seule dans IE>
Lucky

4
Fonctionne dans Chrome et Firefox. Plus qu'assez.
naimul64

12

Je suis resté coincé avec toutes les options ici. Voici un hack que j'ai fait et qui a fonctionné:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

et vous pouvez déclencher la réinitialisation à l'aide de jQuery avec un code similaire à celui-ci:

$('#file_reset').trigger('click');

(jsfiddle: http://jsfiddle.net/eCbd6/ )


3
ok mais il effacera tout le formulaire .. entrée de fichier non spécifique
Ashish Ratan

8

Je me suis retrouvé avec ceci:

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

n'est peut-être pas la solution la plus élégante, mais cela fonctionne pour autant que je sache.



ne fonctionne pas dans chrome 34 (linux). La méthode replaceWith () fonctionne dans les deux navigateurs (chrome, firefox)
Gaurav Sharma

Au début, je dois remarquer "Le $ .browser a été supprimé de jquery 1.9" mais les deux dernières lignes (Changer l'attribut de type en texte puis le remettre dans le fichier) ont fonctionné. De plus, j'ai essayé de définir $ ('# control'). Val (''); ou en javascript document.getElementById (control) .value = ''; et travaillé aussi et je ne sais pas pourquoi nous ne devrions pas utiliser cette approche!? Enfin, j'ai décidé de les utiliser tous les deux.
QMaster

8

J'ai utilisé https://github.com/malsup/form/blob/master/jquery.form.js , qui a une fonction appelée clearInputs(), qui est croisée, bien testée, facile à utiliser et gère également les problèmes IE et la suppression des champs cachés si besoin. Peut-être une solution un peu longue pour effacer uniquement l'entrée de fichier, mais si vous avez affaire à des téléchargements de fichiers croisés, cette solution est recommandée.

L'utilisation est simple:

// Efface tous les champs du fichier:
$ ("entrée: fichier"). clearInputs ();

// Efface également les champs masqués:
$ ("input: file"). clearInputs (true);

// Effacer des champs spécifiques:
$ ("# myfilefield1, # ​​myfilefield2"). clearInputs ();
/ **
 * Efface les éléments de formulaire sélectionnés.
 * /
$ .fn.clearFields = $ .fn.clearInputs = fonction (includeHidden) {
    var re = / ^ (?: couleur | date | datetime | email | mois | nombre | mot de passe | plage | recherche | tel | texte | heure | url | semaine) $ / i; // 'caché' n'est pas dans cette liste
    retourner this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        sinon if (t == 'case à cocher' || t == 'radio') {
            this.checked = false;
        }
        sinon si (tag == 'sélectionner') {
            this.selectedIndex = -1;
        }
        sinon si (t == "fichier") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (this) .replaceWith ($ (this) .clone (true));
            } autre {
                $ (ce) .val ('');
            }
        }
        sinon si (includeHidden) {
            // includeHidden peut être la valeur true, ou il peut s'agir d'une chaîne de sélection
            // indiquant un test spécial; par exemple:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // ce qui précède nettoierait les entrées cachées qui ont la classe «spécial»
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (this) .is (includeHidden))))
                this.value = '';
        }
    });
};

Je ne comprends pas pourquoi cette réponse n'est pas plus votée?!
AlexB

1
@AlexB: Parce que, comme l'a expliqué Timo, il est exagéré de simplement effacer un champ de saisie de fichier.
TheCarver

Je ne sais pas si cela a fonctionné mais pas plus sur FF 45.0.2 :(
fralbo

5

La valeur des entrées de fichier est en lecture seule (pour des raisons de sécurité). Vous ne pouvez pas le masquer par programme (autrement qu'en appelant la méthode reset () du formulaire, qui a une portée plus large que ce champ).


16
Je suis confus - j'ai essayé $ ("# inputControl"). Val ("") et il a effectivement effacé le champ. Suis-je en train de manquer quelque chose?
Sampson

1
@Jonathan, ça marche aussi pour moi, mais si vous le définissez sur autre chose, c'est une erreur de sécurité. Testé en FF4.
Brenden

reset () est une méthode native JS, donc si vous sélectionnez le formulaire via jQuery, vous devez retirer l'élément de la portée jQuery. $ ("form # myForm") [0] .reset ();
Chris Stephens

4
@Jonathan Cela fonctionne pour vous parce que vous ne l'avez pas fait dans IE. Ce problème de sécurité est quelque chose que seul IE arrête. La suppression de la valeur fonctionne régulièrement dans Chrome et Firefox, mais pas dans IE
VoidKing

5

J'ai pu faire fonctionner le mien avec le code suivant:

var input = $("#control");    
input.replaceWith(input.val('').clone(true));

5

Je cherchais un moyen simple et propre d'effacer les entrées de fichiers HTML, les réponses ci-dessus sont excellentes, mais aucune d'entre elles ne répond vraiment à ce que je recherche, jusqu'à ce que je tombe sur le Web avec une manière simple et élégante de le faire:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

tout le mérite revient à Chris Coyier .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>


4

La .clone()chose ne fonctionne pas dans Opera (et peut-être dans d'autres). Il garde le contenu.

La méthode la plus proche ici pour moi était celle de Jonathan plus tôt, mais en veillant à ce que le champ conserve son nom, ses classes, etc., ce qui rendait le code désordonné dans mon cas.

Quelque chose comme ça pourrait bien fonctionner (merci aussi à Quentin):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

Cela a-t-il été testé dans tous les principaux navigateurs?
Shawn

Il semble fonctionner correctement dans la dernière version de Chrome / FF / Opera et dans IE8. Je ne vois aucune raison pour laquelle cela ne fonctionnerait sur rien - l'option de réinitialisation sur les formulaires existe depuis longtemps.
SpoonNZ

4

J'ai réussi à faire fonctionner cela en utilisant ce qui suit ...

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

Cela a été testé dans IE10, FF, Chrome et Opera.

Il y a deux mises en garde ...

  1. Ne fonctionne toujours pas correctement dans FF, si vous actualisez la page, l'élément de fichier est re-rempli avec le fichier sélectionné. L'endroit où il obtient ces informations me dépasse. Quoi d'autre lié à un élément d'entrée de fichier pourrais-je essayer de supprimer?

  2. N'oubliez pas d'utiliser la délégation sur tous les événements que vous avez attachés à l'élément d'entrée de fichier, afin qu'ils fonctionnent toujours lorsque le clone est effectué.

Ce que je ne comprends pas, c'est qui diable pensait que ne pas vous permettre d'effacer un champ d'entrée d'une sélection de fichiers inacceptable invalide était une bonne idée?

OK, ne me laissez pas le définir dynamiquement avec une valeur afin que je ne puisse pas lixivier des fichiers du système d'exploitation d'un utilisateur, mais permettez-moi d'effacer une sélection non valide sans réinitialiser un formulaire entier.

Ce n'est pas comme «accepter» fait quoi que ce soit d'autre qu'un filtre et dans IE10, il ne comprend même pas les types MIME de MS Word, c'est une blague!


Cela fonctionne presque. La seule chose que vous devez faire pour que cela fonctionne dans Firefox est d'utiliser .pop()le tableau de fichiers au lieu de le mettre à null. cela semble effacer correctement le fichier.
kmacdonald le

2

Sur mon Firefox 40.0.3 ne fonctionne qu'avec ce

 $('input[type=file]').val('');
 $('input[type=file]').replaceWith($('input[type=file]').clone(true));

1
$ ('input [type = fichier]'). replaceWith ($ ('input [type = fichier]'). clone (true) .val (''));
Andrei

2

ses travaux pour moi dans chaque navigateur.

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

1

J'ai essayé avec la plupart des techniques mentionnées par les utilisateurs, mais aucune d'entre elles ne fonctionnait dans tous les navigateurs. ie: clone () ne fonctionne pas dans FF pour les entrées de fichiers. J'ai fini par copier manuellement l'entrée du fichier, puis remplacer l'original par celui copié. Cela fonctionne dans tous les navigateurs.

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>");
$fileInput.replaceWith($fileCopy);

0

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

1
Salut Niraj. Bienvenue. Cette réponse pourrait bien être correcte, mais elle pourrait utiliser certaines explications.
tomfanning

0

Cela fonctionne avec Chrome, FF et Safari

$("#control").val("")

Peut ne pas fonctionner avec IE ou Opera


1
Semble presque identique au problème même dans l'OP
Trindaz

1
n'est pas une norme ecmascript, la valeur du fichier de type d'entrée est une propriété de protection pour des raisons de sécurité.
e-info128

0

Rendez-le asynchrone et réinitialisez-le une fois les actions souhaitées du bouton effectuées.

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

0
function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}

0

ça ne marche pas pour moi:

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

donc dans asp mvc j'utilise des fonctionnalités de rasoir pour remplacer l'entrée de fichier. créez d'abord une variable pour la chaîne d'entrée avec l'ID et le nom, puis utilisez-la pour afficher la page et remplacer le bouton de réinitialisation, cliquez sur:

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

0

Un moyen simple consiste à modifier le type d'entrée et à le modifier à nouveau.

Quelque chose comme ça:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

-1

Vous pouvez le remplacer par son clone comme ça

var clone = $('#control').clone();

$('#control').replacewith(clone);

Mais ce clone avec sa valeur aussi, vous feriez mieux

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

-4

C'est facile lol (fonctionne dans tous les navigateurs [sauf l'opéra]):

$('input[type=file]').each(function(){
    $(this).after($(this).clone(true)).remove();
});

JS Fiddle: http://jsfiddle.net/cw84x/1/


Je me fiche de l'opéra. Emballez-le simplement dans le formulaire, puis si vous vous en souciez. Personnellement, je m'en fiche et j'utiliserai ma méthode.
Anonyme

2
Ce n'est pas une bonne réponse du tout mais le problème principal était la très mauvaise attitude
Sam P

-5

Quelle? Dans votre fonction de validation, mettez simplement

document.onlyform.upload.value="";

En supposant que le téléchargement est le nom:

<input type="file" name="upload" id="csv_doc"/>

J'utilise JSP, je ne sais pas si cela fait une différence ...

Fonctionne pour moi, et je pense que c'est beaucoup plus facile.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.