与现有表单很好地集成的多个文件上传器答案

【问题标题】：Multiple files uploader that integrates well with existing form与现有表单很好地集成的多个文件上传器
【发布时间】：2014-05-18 12:26:04
【问题描述】：

我知道这个问题可能太笼统了，但是花了一整天的时间后，我对这个问题很迷茫。

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

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

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

有什么建议吗？

【问题讨论】：

看看Fine Uploader。它具有使与现有表单的集成变得简单而强大的功能。您可以在docs.fineuploader.com/branch/master/features/forms.html 阅读有关该特定功能的更多信息。全面披露：我是该产品的开发人员。
谢谢！这看起来真的很酷。它是否只是将文件添加到队列中并在用户提交表单时提交？
它将寻找表单提交作为上传文件的提示。实际上，它会拦截表单提交，然后在不刷新页面的情况下上传包含任何表单数据的文件。下面的答案没有处理的另一件事是：它将尊重您放置在表单元素上的任何 html5 表单验证属性。如果您有兴趣，我链接到的文档详细介绍了所有这些内容。
我看到了文档，谢谢。我目前在我的表单中使用 jQuery Validate。是否可以使用它的submitHandler 通过 Ajax 提交数据？还是有其他方法可以通过 Ajax 提交整个表单？基本上，我需要的是通过 POST 在一次运行中提交所有表单数据和文件——在我的 PHP 代码中，我首先在 db 中创建记录，而不是通过它的 REST API 将文件上传到 SugarCRM。
好的，谢谢，我试试看。

标签： jquery forms uploader

【解决方案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 等。

【讨论】：

谢谢。好吧，我很想拥有插件提供的拖放、进度条和其他功能——这就是我仍在寻找插件的原因（目前只使用<input type="file" multiple>
插件永远是一件完美的事情！是的，这也很完美。 :)

【解决方案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
}

【讨论】：