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

我知道这个问题可能过于笼统,但在花了一整天之后,我对这个问题很遗憾。

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

我试过的所有上传插件–jQuery File Upload,Plupload,Uploadify,Dropzone.js – 非常适合文件提交,但不可能集成到现有表单中 – 通常它们需要队列中的一些文件来提交表单,提交其他表格字段等的麻烦

我需要一些简单的东西:用户填写表单,拖放dropzone上的文件(或者如果他不想提交任何文件,则不提交)并提交表单。 我甚至不需要Ajax表单提交(尽管我想拥有它)。

有小费吗?

如果您不想使用Ajax File上传,那么您不需要使用任何插件。 只需使用简单(默认)表单提交(输入提交点击)。

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

   

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

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

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

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

当你去除额外的function时,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 }