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

Question

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

这是我的代码：

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();
});

控制器：

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

查看：

<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>

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

Answer 1

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

您应该删除 enqueueForUpload: false，设置 autoProcessQueue: false 并在您选择（即删除）所有需要上传的文件后，调用 .processQueue() 函数，如documentation.

Answer 2

问题是我使用的输入 type="submit" 会自己做另一个 post，将其更改为类型 button 有效。

Answer 3

我还看到多个 POST 一次发送 2 个文件（因此，例如，2 个单独的 POST 总共 4 个文件）。

我找到了解决方案 here：增加 parallelUploads。我现在按以下方式创建放置区：

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

Answer 4

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

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

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

Answer 5

我可以看到它很旧 post，但是，我会回答希望它可能对某人有所帮助。

2 次请求

OPTIONS - no files

POST - with files

Chrome 将执行 pre-flight 请求（选项） 以查找 CORS headers。这是几乎所有最新浏览器都遵循的标准。

Answer 6

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

我的选择是这样的：

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

使用 autoProcessQueue: false 和 uploadMultiple: true：我收到请求的每 2 个文件。

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

然后我只需添加 autoDiscover: false，然后一切正常！

好看！

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

upload multiple files in one request Dropzone sending two requests

asp.net-mvc

jquery

file-upload

dropzone.js