Come posso cancellare un input di file HTML con JavaScript?

Voglio cancellare l'input del file nel mio modulo.

So di impostare le fonti sullo stesso metodo ... Ma quel metodo non cancella il percorso del file selezionato.

Nota : vorrei evitare di dover ricaricare la pagina, ripristinare il modulo o eseguire una chiamata AJAX.

È possibile?

Che ne dici di rimuovere quel nodo, crearne uno nuovo con lo stesso nome?

Esistono 3 modi per cancellare l'input di file con javascript:

1. imposta la proprietà del valore su vuota o nulla.

   Funziona con IE11 + e altri browser moderni.

2. Crea un nuovo elemento di input file e sostituisci quello vecchio.

   Lo svantaggio è che perderai ascoltatori di eventi ed espanderai le proprietà.

3. Reimposta il modulo proprietario tramite il metodo form.reset ().

   Per evitare di influire su altri elementi di input nello stesso modulo proprietario, possiamo creare un nuovo modulo vuoto e aggiungere l'elemento di input file a questo nuovo modulo e ripristinarlo. In questo modo funziona per tutti i browser.

Ho scritto una funzione JavaScript. demo: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl; dr : per i browser moderni, basta usare

input.value = '';

Vecchia risposta:

Che ne dite di:

input.type = "text";
input.type = "file";

Devo ancora capire perché questo non funziona con WebKit .

Ad ogni modo, funziona con IE9>, Firefox e Opera.
La situazione con webkit è che non riesco a cambiarlo in file.
Con IE8, la situazione è che genera un'eccezione di sicurezza.

Modifica: per webkit, Opera e firefox funziona anche se:

input.value = '';

(controlla la risposta sopra con questa proposta)

Vedrò se riesco a trovare un modo più pulito di fare questo browser senza la necessità del GC.

Edit2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

Funziona con la maggior parte dei browser. Non funziona con IE <9, tutto qui.
Testato su Firefox 20, Chrome 24, Opera 12, IE7, IE8, IE9 e IE10.

L'impostazione del valore su ''non funziona in tutti i browser.

Prova invece a impostare il valore in nullmodo tale:

document.getElementById('your_input_id').value= null;

EDIT: ottengo i motivi di sicurezza molto validi per non consentire a JS di impostare l'input del file, tuttavia sembra ragionevole fornire un semplice meccanismo per cancellare l' output già selezionato. Ho provato a utilizzare una stringa vuota ma non ha funzionato in tutti i browser, ha NULLfunzionato in tutti i browser che ho provato (Opera, Chrome, FF, IE11 + e Safari).

EDIT: Notare che l'impostazione NULLfunziona su tutti i browser mentre l'impostazione su una stringa vuota no.

Sfortunatamente nessuna delle risposte di cui sopra sembra coprire tutte le basi - almeno non con i miei test con vaniglia javascript.

• .value = nullsembra funzionare su FireFox, Chome, Opera e IE11 (ma non IE8 / 9/10 )

• .cloneNode(e .clone()in jQuery) su FireFox sembra copiare l' .valueover, rendendo quindi inutile il clone.

Quindi ecco la funzione javascript alla vaniglia che ho scritto che funziona su FireFox (27 e 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) ... questi sono gli unici browser attualmente disponibili a me per provare.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

Il ctrlparametro è l'input del file stesso, quindi la funzione sarebbe chiamata come ...

clearFileInput(document.getElementById("myFileInput"));

SOLUZIONE

Il seguente codice ha funzionato per me con jQuery. Funziona in ogni browser e consente di preservare eventi e proprietà personalizzate.

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

Vedi questo jsFiddle per il codice e la dimostrazione.

LINK

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

• Come resettare l'input di file con JavaScript

Devi sostituirlo con un nuovo input di file. Ecco come si può fare con jQuery:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

e utilizzare questa riga quando è necessario cancellare il campo di input (ad esempio in alcuni eventi):

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

Modifica:
questo non funziona in IE e Opera, ma sembra funzionare per Firefox, Safari e Chrome.

Avevo lo stesso problema e mi è venuta in mente questa.

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

In realtà è abbastanza facile.

document.querySelector('#input-field').value = '';

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>

Le risposte sopra offrono soluzioni un po 'goffe per i seguenti motivi:

1. Non mi piace dover fare wrapil inputprimo e poi ottenere l'html, è molto complicato e sporco.

2. Cross browser JS è utile e sembra che in questo caso ci siano troppe incognite per utilizzare in modo affidabile la typecommutazione (che, di nuovo, è un po 'sporca) e l'impostazione valuesu''

Quindi ti offro la mia soluzione basata su jQuery:

$('#myinput').replaceWith($('#myinput').clone())

Fa quello che dice, sostituisce l'input con un clone di se stesso. Il clone non avrà il file selezionato.

vantaggi:

1. Codice semplice e comprensibile
2. Nessun avvolgimento o cambio di tipo maldestri
3. Compatibilità tra browser (correggimi se sbaglio qui)

Risultato: programmatore felice

Ecco i miei due centesimi, i file di input sono memorizzati come array, quindi ecco come annullarlo

document.getElementById('selector').value = []

questo restituisce un array vuoto e funziona su tutti i browser

Ciò che mi ha aiutato è che ho cercato di recuperare e caricare l'ultimo file selezionato usando un ciclo, invece di svuotare la coda, e ha funzionato. Ecco il codice

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

Spero che questo possa aiutare alcuni.

Ho provato la maggior parte delle soluzioni ma non sembra che nessuno funzioni. Tuttavia ho trovato una passeggiata per questo sotto.

La struttura del modulo è: form=> label, inpute submit button. Dopo aver scelto un file, il nome file verrà mostrato dall'etichetta procedendo manualmente in JavaScript.

Quindi la mia strategia è: inizialmente l'invio buttonè disabilitato, dopo aver scelto un file, l' disabledattributo del pulsante di invio verrà rimosso in modo che io possa inviare il file. Dopo l'invio, deseleziono il labelche fa sembrare che io cancelli il fileinput ma in realtà no. Quindi disabiliterò nuovamente il pulsante di invio per impedire l'invio del modulo.

Impostando l'invio button disableo meno, interrompo l'invio del file più volte a meno che non scelga un altro file.

Ho cambiato per digitare il testo e di nuovo per digitare il file utilizzando setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}

la input.value = nullè un metodo di lavoro, ma sarà solo di ingresso trigger changeevento se chiamato da unonclick evento.

Una soluzione a questo sarebbe quella chiamata onchangemanuale di quel gestore ogni volta che è necessario ripristinare l'input.

function reset_input(input) {
    $(input)[0].value = null;
    input_change_handler();
}
function input_change_handler() {
    // this happens when there's been a change in file selection

    if ($(input)[0].files.length) {
        // file(s) selected
    } else {
        // nothing is selected
    }
}
$(input).on('change', input_change_handler);