Variable leer wird nach Eingabefeld Zurücksetzen

Question

<input type="file" onchange="uploadFiles()" multiple/> 

Nach dem Eingangswert in einer Variablen zu speichern und das Eingabefeld zurückzusetzen, wird die Variable leer wird

function uploadFiles(){ 
    var newFiles = $('input')[0].files; 
    $('input').replaceWith($('input').val('').clone(true)); 
    console.log(newFiles); // result == [] 
} 

Bitte wie kann ich dieses Problem beheben?

Answer 1

$('input')[0].files gibt Ihnen die FileList Eigenschaft der input, die daran angehängt ist. Wenn Sie den Wert der Eingabe ändern, ändert sich der Wert der Eigenschaft und all ihrer Zuweisungen.

Sie können, indem die Dateien in eine separate Anordnung um das Problem umgehen:

var newFiles = $('input')[0].files; 
var filesArray = []; 
for(var i=0; i<newFiles.length; i++){ 
    filesArray[i] = newFiles[i]; 
} 
$('input').replaceWith($('input').val('').clone(true)); 
console.log(newFiles); // result == [] 
console.log(filesArray); // result == [File] 

Demo

Hinweis: Aus Sicherheitsgründen können Sie oder können nicht die Dateien verwenden wie vorgesehen nach dem Wechsel der Wert der ursprünglichen Eingabe. Ich habe es aber nicht getestet. Wenn Sie bestätigen oder entlarven können, kommentieren Sie bitte.

Answer 2

Dies liegt daran, dass Ihr Ereignis onchange ein zweites Mal ausgelöst wird, wenn Sie das Eingabefeld zurücksetzen. Das Zurücksetzen des Eingabefeldes gilt als Änderung.

Eine Möglichkeit wäre, die onchange Ereignisse vorübergehend zu deaktivieren, während Sie den Wert aktualisieren.

// remove the change handler 
$('input').off('change', uploadFiles); 
$('input').val(''); 
// re-establish the change handler 
$('input').on('change', uploadFiles); 

Hinweis: Es ist keine gute Idee, Inline-Event-Handler (onchange="whatever") mit Handler in Ihrem Skript zu mischen. Sie sollten nur jQuery on().