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

Posted 2023-02-16

【中文标题】与现有表单很好地集成的多个文件上传器

【英文标题】：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。

好的，谢谢，我试试看。

【参考方案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