jQuery nur zuletzt gezogene Dateien hochladen

Question

Ich folgte dieser tutorial zum Erstellen einer DragNDrop-Datei hochladen.

Es besteht im Wesentlichen aus

<form id='dragform'> 
<input type="file" name="file[]" id="fileC" class="inputfile" multiple /> 
    <label for="fileC" id='dropLabel'> 
    </label> 
</form> 

wo der Eingang versteckt ist.

Der Upload erfolgt durch

var $form = $('#dragform'); 

.on('drop', function(e) 
{ 
    droppedFiles = e.originalEvent.dataTransfer.files;   
    $form.trigger('submit'); 
}); 

var $input = $('.inputfile'); 

$input.on('change', function(e) 
{ 
    $form.trigger('submit'); 
}); 

$form.on('submit', function(e) 
{ 
    var ajaxData = new FormData($form.get(0)); 

    if (droppedFiles) {    
    $.each(droppedFiles, function(i, file) { 
    ajaxData.append($input.attr('name'), file); 
    }); 
    } 

[...] 

}); 

Das heißt, es gibt 2 Möglichkeiten zum Hochladen von Dateien, entweder durch Auswahl oder durch Fallenlassen. In beiden Fällen werden die Dateien direkt mit AJAX hochgeladen. Hier kommt nun mein Problem:

Wenn ich file1.pdf wählen dann ajaxData enthält nur file1.pdf. Wenn ich jetzt file2.pdf und file3.pdf im Bereich Dragndrop fallen, dann ajaxData enthält file1.pdf, file2.pdf und file3.pdf - aber ich will nur, sie enthalten die gezogenen Dateien file2.pdf und file3.pdf, seit datei1.pdf wurde zuvor hochgeladen. Wenn ich jetzt file4.pdf wählen, dann ajaxData umfasst file2.pdf, file3.pdf und file4.pdf.

Was muss ich ändern, damit ich nur die zuletzt gezogenen oder zuletzt ausgewählten Dateien aus meinem Formular bekomme?

Answer 1

Das funktioniert jetzt:

var ajaxData; 

if (droppedFiles) { 
    ajaxData = new FormData(); 
    $.each(droppedFiles, function(i, file) { 
    ajaxData.append($input.attr('name'), file); 
    }); 
} 
else { 
    ajaxData = new FormData($form.get(0)); 
} 
droppedFiles = "";