Javascript 结合'；下降区'；使用'；常规文件输入'；

我担心这个问题以前已经得到了回答，但我什么也找不到

我正在开发一个普通的web应用程序。它的一部分是一个文件上传器，它将xml文件上传到一个JavaServlet，然后解析并导入数据库

直到最近，支持这一点的html和javascript看起来类似于以下内容（请注意，讽刺和/或无益的注释取代了与问题无关的大块代码）：

html

<form id="import_form">
  <!-- Some irrelevant divs here --> 
  <span class="btn btn-default btn-file">
        Browse <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" accept="" onchange="updateFileList();"/>
  </span>
  <!-- Some irrelevant divs here --> 
</form>

<div id="drop-zone">
    <p class="info">Or drop files here</p>
</div>

当用户通过一组按钮单击自己时，将调用

submitImport

方法

这一切都很好，很好用。然而，为了使web应用程序更酷，今天我尝试添加一个“drop zone”：

html

<form id="import_form">
  <!-- Some irrelevant divs here --> 
  <span class="btn btn-default btn-file">
        Browse <input name="filesToUpload[]" id="filesToUpload" type="file" multiple="" accept="" onchange="updateFileList();"/>
  </span>
  <!-- Some irrelevant divs here --> 
</form>

<div id="drop-zone">
    <p class="info">Or drop files here</p>
</div>

还和我在一起吗？好的，我的问题如下：

如何在一个区块中通过

$.ajax

发送从“浏览”输入、和拖放区添加的文件

正如

好的，那么现在怎么办？

注释所指出的，我真的不知道如何处理添加到拖放区中的文件。我可以轻松地获取“浏览”-输入表单文件

$("#filesToUpload").prop("files");

然而，我逐渐明白了这一点，所以这对我并没有多大帮助，因为我无法将第一个附加到第二个

由于特定于应用程序的原因，one chunk部分至关重要。因此，像顺序发送所有文件列表这样的解决方案并不理想

请注意，我在任何与网络相关的领域都是新手，因此，如果答案就在眼前，我表示歉意

 var files = event.dataTransfer.files;

// Okey so what now?

好的，现在是以下内容：

是的，文件列表对象是不可变的。但是您不需要修改它们。 只需将文件列表中删除的文件逐个添加到名为“files”的数组中

然后，在调用jQuery.ajax之前，您可以将文件数组中的所有文件作为常规字段添加到FormData对象中

例如：

步骤1-记住丢弃的文件

var files=event.dataTransfer.files

在onDrop：

for(var i = 0;i < event.dataTransfer.files.length;i++) {
    files.push(event.dataTransfer.files.item(i));
    // here you can add some DOM manipulations to show users what files have been dropped here
}

for（var i=0；i

步骤2-将文件添加到FormData对象

for(var i = 0;i < fileList.length;i++) {
    formData.append('droppedFile[]', fileList[i]);
}

for（var i=0；i

瞧

问题是，您无法在随后的文件删除中检查重复项，因为出于安全原因，无法访问文件的完整本地路径（在某些浏览器上可用，但我们不必依赖此不可靠的功能）

for(var i = 0;i < fileList.length;i++) {
    formData.append('droppedFile[]', fileList[i]);
}