Question

DragNDropファイルのアップロードを作成する方法については、tutorialに従いました。

それは基本的に入力が非表示になっている

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

から成ります。アップロードが

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

[...] 

}); 

によって行われ

これは、選択するか、ドロップすることにより、いずれか、ファイルをアップロードするには2つのオプションがあることを意味します。どちらの場合も、ファイルはAJAXで直接アップロードされます。ここに私の問題は今、来る：

私はfile1.pdfを選択した場合、その後ajaxDataだけfile1.pdfが含まれています。私は今DragNDropエリアにfile2.pdfとfile3.pdfをドロップする場合は、ajaxDataはfile1.pdf、file2.pdfとfile3.pdfが含まれている - しかし、私はそれが含まれるようにしますドラッグされたファイルfile2.pdfとfile3.pdf、file1.pdfが以前にアップロードされています。私は今file4.pdfを選択した場合は、ajaxDataはfile2.pdf、file3.pdfとfile4.pdfが含まれています。

フォームから最後にドラッグしたファイルまたは最後に選択したファイルのみを取得するには、何を変更する必要がありますか？

Answer 1

これが機能するようになりました。ありがとうござい@VelimirTchatchevsky

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 = "";