Question

我知道这个问题可能过于笼统，但在花了一整天的时间之后，我很遗憾就失去了这个问题。

任何人都知道上传器插件，可以轻松地与现有表单集成吗？

我尝试的所有上传器插件 - jQuery File Upload，Plupload，Uploadify，Dropzone.js - 非常适合文件提交，但无法集成到现有表单中 - 通常它们需要队列中的一些文件才能提交表单所有，有提交其他表格领域的麻烦等。

我需要一些简单的事情：用户填写表单，拖放dropzone上的文件（或者如果他不想提交任何文件，则不提交）并提交表单。我甚至不需要Ajax表单提交（尽管我想拥有它）。

任何提示？

Answer 1

如果您不想使用Ajax文件上传，那么您就不需要使用任何插件。只需使用简单（默认）表单提交（输入提交点击）。

这就像添加更多输入字段一样：

<input type="file" name="somename" />
<input type="file" name="somename2" />

现在在服务器端，您需要为每个文件循环。我在ASP.NET中表现得更好，我会告诉你如何在ASP.NET中做到这一点，如果你正在使用其他语言，你可能仍然会得到主要的技巧或想法。

for(int i =0; i < numFiles; i++) {
    var uploadedFile = Request.Files[i];
    /* save it! */
}

上面提到的是一个for循环，你循环等于与HttpRequest一起发送的文件数。然后你得到每个文件并做你想做的事情。

这个很简单！您可以更改自己语言的代码，例如PHP等。

Answer 2

当您删除额外的功能时，AJAX文件上传非常简单：

var fd = new FormData(form);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function(e) {
    // Handle progress
}, false);

xhr.addEventListener("load", function(e) {
    if( xhr.status == 200 ) {
        // Handle success
    } else {
        // Handel error
    }
}, false);

xhr.addEventListener("error", function(e) {
    // Handle error
}, false);

xhr.addEventListener("abort", function(e) {
    // Handle abort
}, false);

try {
    xhr.open('POST', 'http://server.com/uploader.php', true);
    xhr.send(fd);
} catch(e) {
    // Handle error
}

多个文件上传器，可与现有表单完美集成

2 个答案: