Question

我按照tutorial关于如何创建DragNDrop文件上传。

它基本上由

组成

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

 [...]

});

这意味着有两个选项可以通过选择或删除来上传文件。在这两种情况下，文件都直接使用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

现在可以使用：

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

jQuery只上传最后拖动的文件

1 个答案: