Cancella <input type = 'file' /> usando jQuery

È possibile cancellare un <input type='file' />valore di controllo con jQuery? Ho provato quanto segue:

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

Ma non funziona.

Facile: avvolgi un <form>elemento attorno all'elemento, chiama il reset sul modulo, quindi rimuovi il modulo usando .unwrap(). A differenza delle .clone()soluzioni altrimenti in questo thread, alla fine si ottiene lo stesso elemento (comprese le proprietà personalizzate che sono state impostate su di esso).

Testato e funzionante in Opera, Firefox, Safari, Chrome e IE6 +. Funziona anche su altri tipi di elementi del modulo, ad eccezione di 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

Come indicato di seguito da Timo, se si dispone dei pulsanti per attivare il ripristino del campo all'interno del campo <form>, è necessario chiamare .preventDefault()l'evento per impedire l' <button>invio di un invio.

MODIFICARE

Non funziona in IE 11 a causa di un bug non corretto. Il testo (nome del file) viene cancellato sull'input, ma il suo Fileelenco rimane popolato.

Risposta rapida: sostituirla.

Nel codice seguente utilizzo il replaceWithmetodo jQuery per sostituire il controllo con un clone di se stesso. Nel caso in cui vi siano gestori associati ad eventi su questo controllo, vorremmo preservare anche quelli. Per fare ciò passiamo truecome primo parametro del clonemetodo.

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

var control = $("#control");

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

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

Se la clonazione, pur preservando i gestori di eventi, presenta eventuali problemi che potresti considerare di utilizzare la delega di eventi per gestire i clic su questo controllo da un elemento padre:

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

Ciò impedisce la clonazione di eventuali gestori insieme all'elemento durante l'aggiornamento del controllo.

Si suppone che Jquery si occupi dei problemi tra browser / browser precedenti per te.

Funziona su browser moderni che ho testato: Chromium v25, Firefox v20, Opera v12.14

Utilizzo di jquery 1.9.1

HTML

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

jquery

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

Su jsfiddle

La seguente soluzione javascript ha funzionato anche per me sui browser menzionati sopra.

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

Su jsfiddle

Non ho modo di testare con IE, ma teoricamente dovrebbe funzionare. Se IE è abbastanza diverso che la versione Javascript non funziona perché MS lo ha fatto in un modo diverso, il metodo jquery dovrebbe a mio avviso gestirlo per te, altrimenti varrebbe la pena segnalarlo al team di jquery insieme al metodo richiesto da IE. (Vedo le persone che dicono "questo non funzionerà su IE", ma nessun javascript vanilla per mostrare come funziona su IE (presumibilmente una "caratteristica di sicurezza"?), Forse potrebbero segnalarlo come un bug anche a MS (se lo farebbero contarlo come tale), in modo che venga corretto in qualsiasi versione più recente)

Come menzionato in un'altra risposta, un post sul forum di jquery

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

Ma jquery ha ora rimosso il supporto per i test del browser, jquery.browser.

Questa soluzione javascript ha funzionato anche per me, è l'equivalente vaniglia del metodo jquery.replaceWith .

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

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

Su jsfiddle

La cosa importante da notare è che il metodo cloneNode non conserva i gestori di eventi associati.

Vedi questo esempio

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);

Su jsfiddle

Ma jquery.clone offre questo ^{[* 1]}

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

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

    fileopen.replaceWith(clone);
});

Su jsfiddle

^{[* 1]} jquery è in grado di farlo se gli eventi sono stati aggiunti con i metodi di jquery poiché mantiene una copia in jquery.data , non funziona altrimenti, quindi è un po 'un cheat / work-around e significa che le cose non lo sono compatibile tra diversi metodi o librerie.

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

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

    fileopen.replaceWith(clone);
});

Su jsfiddle

Non è possibile ottenere il gestore eventi collegato direttamente dall'elemento stesso.

Ecco il principio generale in javascript alla vaniglia, ecco come lo fanno jquery e tutte le altre librerie (approssimativamente).

(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);
    });
}());

Su jsfiddle

Naturalmente jquery e altre librerie hanno tutti gli altri metodi di supporto necessari per mantenere un tale elenco, questa è solo una dimostrazione.

Per ovvi motivi di sicurezza non è possibile impostare il valore di un input di file, anche su una stringa vuota.

Tutto quello che devi fare è ripristinare il modulo in cui il campo o se vuoi solo ripristinare l'input del file di un modulo contenente altri campi, usa questo:

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

Ecco un esempio: http://jsfiddle.net/v2SZJ/1/

Questo funziona per me.

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

Spero che sia d'aiuto.

In IE8 hanno reso il campo Caricamento file di sola lettura per motivi di sicurezza. Vedi il post sul blog del team IE :

Storicamente, il Controllo caricamento file HTML () è stato la fonte di un numero significativo di vulnerabilità legate alla divulgazione di informazioni. Per risolvere questi problemi, sono state apportate due modifiche al comportamento del controllo.

Per bloccare gli attacchi che si basano sul "furto" di sequenze di tasti per ingannare di nascosto l'utente nel digitare un percorso di file locale nel controllo, la casella di modifica Percorso file è ora di sola lettura. L'utente deve selezionare esplicitamente un file per il caricamento utilizzando la finestra di dialogo Sfoglia file.

Inoltre, l'URL "Includi percorso directory locale durante il caricamento dei file" è stata impostata su "Disabilita" per la zona Internet. Questa modifica impedisce la fuga in Internet di informazioni potenzialmente sensibili sul file system locale. Ad esempio, anziché inviare il percorso completo C: \ users \ ericlaw \ documents \ secret \ image.png, Internet Explorer 8 ora invierà solo il nome file image.png.

$("#control").val('')é tutto quello di cui hai bisogno! Testato su Chrome utilizzando JQuery 1.11

Anche altri utenti hanno testato su Firefox.

Mi sono bloccato con tutte le opzioni qui. Ecco un trucco che ho fatto che ha funzionato:

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

e puoi attivare il ripristino utilizzando jQuery con un codice simile al seguente:

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

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

Ho finito con questo:

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'); 
}

potrebbe non essere la soluzione più elegante, ma funziona per quanto ne so.

Ho usato https://github.com/malsup/form/blob/master/jquery.form.js , che ha una funzione chiamata clearInputs(), che è crossbrowser, ben testato, facile da usare e gestisce anche il problema di IE e la cancellazione dei campi nascosti se necessario. Forse una soluzione un po 'lunga per cancellare solo l'input di file, ma se hai a che fare con caricamenti di file crossbrowser, questa soluzione è consigliata.

L'utilizzo è semplice:

// Cancella tutti i campi del file:
$ ( "Ingresso: file") clearInputs ();.

// Cancella anche i campi nascosti:
$ ( "Ingresso: file") clearInputs (true);.

// Cancella campi specifici:
$ ( "# Myfilefield1, # ​​myfilefield2") clearInputs ().;

/ **
 * Cancella gli elementi del modulo selezionato.
 * /
$ .fn.clearFields = $ .fn.clearInputs = function (includeHidden) {
    var re = / ^ (?: colore | data | datetime | email | mese | numero | password | intervallo | ricerca | tel | testo | tempo | url | settimana) $ / i; // 'nascosto' non è in questo elenco
    return this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        altrimenti if (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        altrimenti if (tag == 'seleziona') {
            this.selectedIndex = -1;
        }
        altrimenti if (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                $ (This) .replaceWith ($ (this) .clone (true));
            } altro {
                $ (This) .VAL ( '');
            }
        }
        else if (includeHidden) {
            // includeHidden può essere il valore true oppure può essere una stringa di selezione
            // indica un test speciale; per esempio:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // quanto sopra eliminerebbe gli input nascosti che hanno la classe di "speciale"
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $ (this) .is (includeHidden)))
                this.value = '';
        }
    });
};

Il valore degli input di file è di sola lettura (per motivi di sicurezza). Non è possibile cancellarlo a livello di codice (tranne che chiamando il metodo reset () del modulo, che ha un ambito più ampio di quel solo campo).

Sono stato in grado di far funzionare il mio con il seguente codice:

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

Ho cercato un modo semplice e chiaro per cancellare l'input di file HTML, le risposte sopra sono fantastiche, ma nessuna di esse risponde davvero a quello che sto cercando, fino a quando non mi sono imbattuto sul web con un modo semplice ed elegante per farlo:

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

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

tutto il merito va a 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>

La .clone()cosa non funziona in Opera (e forse in altri). Mantiene il contenuto.

Il metodo più vicino qui per me era il precedente di Jonathan, tuttavia assicurando che il campo conservasse il suo nome, le classi, ecc. Nel mio caso creava codice disordinato.

Qualcosa del genere potrebbe funzionare bene (grazie anche a Quentin):

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

Sono riuscito a farlo funzionare usando il seguente ...

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

Questo è stato testato in IE10, FF, Chrome e Opera.

Ci sono due avvertenze ...

1. Non funziona ancora correttamente in FF, se si aggiorna la pagina, l'elemento del file viene popolato nuovamente con il file selezionato. Da dove sta ottenendo queste informazioni è oltre me. Cos'altro correlato a un elemento di input di file è possibile provare a cancellare?

2. Ricorda di usare la delega su tutti gli eventi che hai allegato all'elemento di input del file, in modo che funzionino ancora quando viene creato il clone.

Quello che non capisco è chi sulla Terra abbia pensato di non permetterti di cancellare un campo di input da una selezione di file inaccettabile non valida è stata una buona idea?

OK, non farmi impostare dinamicamente con un valore in modo da non poter scaricare i file dal sistema operativo di un utente, ma fammi cancellare una selezione non valida senza ripristinare un intero modulo.

Non è come 'accettare' fa comunque qualcosa di diverso da un filtro e in IE10, non capisce nemmeno i tipi di mime di MS Word, è uno scherzo!

Sul mio Firefox 40.0.3 funziona solo con questo

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

funziona per me in ogni browser.

        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);
        }

Ho provato con la maggior parte delle tecniche menzionate dagli utenti, ma nessuna di esse ha funzionato in tutti i browser. cioè: clone () non funziona in FF per input di file. Ho finito per copiare manualmente l'input del file e quindi sostituire l'originale con quello copiato. Funziona in tutti i browser.

<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);

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

Funziona con Chrome, FF e Safari

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

Potrebbe non funzionare con IE o Opera

Rendilo asincrono e ripristinalo dopo che sono state eseguite le azioni desiderate del pulsante.

    <!-- 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>

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

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

per me non funziona:

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

così in asp mvc io uso le funzioni di rasoio per sostituire l'input di file. inizialmente creare una variabile per la stringa di input con ID e nome, quindi utilizzarla per la visualizzazione nella pagina e la sostituzione al pulsante di ripristino fare clic:

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

@attachmentInput

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

Un modo semplice è cambiare il tipo di input e cambiarlo di nuovo.

Qualcosa come questo:

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

Puoi sostituirlo con il suo clone in questo modo

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

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

Ma anche questo clona con il suo valore, quindi è meglio che lo sia

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

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

È facile lol (funziona in tutti i browser [tranne opera]):

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

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

Che cosa? Nella tua funzione di validazione, basta inserire

document.onlyform.upload.value="";

Supponendo che il caricamento sia il nome:

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

Sto usando JSP, non sono sicuro che questo faccia la differenza ...

Funziona per me e penso che sia molto più semplice.