javascript - 将 'Drop-Zone' 与 'regular file-input' 组合

Question

我担心之前有人回答过这个问题，但我找不到任何东西。

我正在开发一个普通的网络应用程序。它的一部分是一个文件 uploader ，它将 xml 文件上传到 Java servlet，这些文件被解析并导入到数据库中。

直到最近，启用此功能的 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>

Javascript

function submitImport() {
    var formData = new FormData($('#import_form')[0]);

    $.ajax({
        url : "uploadEndpoint",
        type : "POST",
        data : formData,
        /* Some more elements */
        success : function(response) {
            // Handle success, it ain't easy
        },
        error : function(request, error, status){
            // Handle failure, weep
        }
    });

当用户通过一组按钮点击自己时，将调用 submitImport 方法。

这一切都很好，花花公子，而且工作得很好。然而，为了使 Web 应用程序酷炫，今天，我尝试添加一个“拖放区”:

html

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

Javascript

// Handler for the drop-zone
$('#drop-zone').on('dragover', function(event){
    event.preventDefault();
    event.stopPropagation();

    if(!event.dataTransfer){
        event.dataTransfer = event.originalEvent.dataTransfer;
    }

    event.dataTransfer.dropEffect = "copy";
    $(this).css("background-color", "#f5f5f5");

}).on('dragleave', function(event){
    event.preventDefault();
    event.stopPropagation();
    $(this).css("background-color", "#fff");
}).on('drop', function(event){
    event.preventDefault();
    event.stopPropagation();

    if(!event.dataTransfer){
        event.dataTransfer = event.originalEvent.dataTransfer;
    }    

    var files = event.dataTransfer.files;

    // Okey so what now?
});

还在我身边吗？好的，所以我的问题如下:

我如何在一个 block 中通过$.ajax发送从“浏览”输入两者添加的文件，< strong>和降落区？

如 Okey so what now? 评论所示，我真的不知道如何处理拖放区中添加的文件。我可以使用

轻松获取“浏览”输入表单文件

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

但是，我开始明白 FileLists是immutable ，所以这对我帮助不大，因为我无法将第一个附加到第二个。

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

请注意，我在任何与网络相关的领域都是新手，所以如果答案让我眼前一亮，我深表歉意。

Answer 1

 var files = event.dataTransfer.files;

// Okey so what now?

好的，现在将是以下内容:

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

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

例如:

第 1 步 - 记住丢失的文件

var files = event.dataTransfer.files;

var files = [];
// (be sure to declare 'files' in a scope available in both of ondrop and form-submit methods)

在拖放时:

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
}

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

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

瞧

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