jQuery 在一个请求中上传多个文件 Dropzone 发送两个请求

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/28021984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 11:29:32  来源:igfitidea点击:

upload multiple files in one request Dropzone sending two requests

jqueryasp.net-mvcfile-uploaddropzone.js

提问by SJMan

I am trying to send multiple files in one request using DropZone js.

我正在尝试使用 DropZone js 在一个请求中发送多个文件。

Here's my code :

这是我的代码:

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone('#upload-Invoices', {       
    paramName: "files", 
    maxFilesize: 3.0, 
    maxFiles: 4,
    parallelUploads: 10000,
    uploadMultiple: true,
    autoProcessQueue: false
});

$('#btnUpload').on('click', function () {
    myDropzone.processQueue();
});

Controller :

控制器 :

public void FileUpload( IEnumerable<HttpPostedFileBase> file )
{
    // Do Something
}

View:

看法:

<form action="/Index/FileUpload"
      class="dropzone"
      id="upload-Invoices" data-ajax-method="POST" data-ajax="true">
    <input type="submit" value="Upload File to Server" id="btnUpload">
</form>

The files are being received although in diferrent requests, I want to send all files in one request, the Dropzone page has an option for it although it does not work. Thanks in Advance

尽管在不同的请求中正在接收文件,但我想在一个请求中发送所有文件,Dropzone 页面有一个选项,尽管它不起作用。提前致谢

采纳答案by SJMan

The Issue was that I was using an input type="submit"which would do another post by itself, changing it to type buttonworked.

问题是我正在使用一个输入type="submit",它会自己做另一篇文章,将其更改为有效的输入button

回答by ahmedkandil

you can use uploadMultiple property default value false change it to true

您可以使用 uploadMultiple 属性默认值 false 将其更改为 true

$(".dropzone").dropzone({
            // autoQueue:false,
            parallelUploads:10,
            uploadMultiple:true,

https://www.dropzonejs.com/#config-uploadMultiple

https://www.dropzonejs.com/#config-uploadMultiple

回答by Greg Sadetsky

I was also seeing multiple POSTs with 2 files being sent at a time (so, for instance, 2 separate POSTs for 4 files total).

我还看到一次发送 2 个文件的多个 POST(例如,总共 4 个文件的 2 个单独的 POST)。

I found the solution here: increasing parallelUploads. I now create the dropzone in the following way:

我在这里找到了解决方案:增加parallelUploads. 我现在通过以下方式创建 dropzone:

var myDropzone = new Dropzone('div#dz', {
  url: 'http://httpbin.org/post',
  uploadMultiple: true,
  parallelUploads: 10
});

回答by Andrei V

The enqueueForUploadproperty is deprecated and you should use autoProcessQueueinstead. My hunch is that, since enqueueForUploadis no longer used and you don't set autoProcessQueueto false, the DropZone.js assumes that you want to send each file, as it is dropped on the component.

enqueueForUpload属性已被弃用,您应该autoProcessQueue改用它。我的预感是,由于enqueueForUpload不再使用并且您没有设置autoProcessQueuefalse,DropZone.js 假定您要发送每个文件,因为它被放置在组件上。

You should remove enqueueForUpload: false, set autoProcessQueue: falseand after you've selected (i.e. dropped) all the files you need to upload, call the .processQueue()function, as described in the documentation.

您应该删除enqueueForUpload: false、设置autoProcessQueue: false并在选择(即删除)您需要上传的所有文件后,调用该.processQueue()函数,如文档中所述。

回答by Sameer

I can see it is very old post, however, I will answer hoping it might help someone.

我可以看到它是很旧的帖子,但是,我会回答希望它可以帮助某人。

2 requests

2 请求

  1. OPTIONS - no files
  2. POST - with files
  1. 选项 - 没有文件
  2. POST - 带有文件

Chrome will do a pre-flight request(OPTIONS)to look for CORS headers. It is a standard which almost all latest browsers follow.

Chrome 将执行飞行前请求(OPTIONS)以查找 CORS 标头。这是几乎所有最新浏览器都遵循的标准。

回答by MarchalPT

Had the same problem, just add autoDiscover: false, to your dropzone options and it should work!

有同样的问题,只需将 autoDiscover: false, 添加到您的 dropzone 选项中,它应该可以工作!

My options are like this:

我的选择是这样的:

Dropzone.options.UploadZone = {        
    addRemoveLinks: true,
    autoDiscover: false,
    uploadMultiple: true,
    parallelUploads: 10,
    maxFiles: 10,
    acceptedFiles: ".jpeg,.jpg,.png",
    autoProcessQueue: false,
    ...

With autoProcessQueue: false and uploadMultiple: true: for each 2 files i was getting a request.

使用 autoProcessQueue: false 和 uploadMultiple: true:对于每 2 个文件,我收到一个请求。

Then I added parallelUploads: 10 and maxFiles: 10 and i don't know why but my first 2 files started uploading as soon as i putted them on the dropzone, even with autoProcessQueue: false.

然后我添加了 parallelUploads: 10 和 maxFiles: 10 ,我不知道为什么,但是我的前 2 个文件一放在 dropzone 上就开始上传,即使使用 autoProcessQueue: false。

Then I just add autoDiscover: false and everything worked fine from there!

然后我只需添加 autoDiscover: false ,然后一切正常!

good look!

好看!