dropzonejs 多文件上传无法按预期工作

Question

我正在尝试使用多重上传，但在我的 MVC 操作中，我没有获得上传文件的列表，而是获得了每个上传项目的 file[]。

我正在上传 2 个文件，但是当我通过以下方式在控制器中访问它时：

        foreach (string filename in Request.Files)
        {
            var file = Request.Files[filename];
            //file.name always reads from file[] and picks the first file in all requests


        }

我的完整要求是：

Request URL: http://localhost:54434/1328/uploads/new
Request Method:POST
Status Code:201 Created
Request Headersview source
Accept:application/json
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:8957136
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarysX8tBB9TH4BzWZsG
Cookie:glimpsePolicy=On; _gauges_unique_month=1; _gauges_unique_year=1; _gauges_unique=1; glimpseId=Chrome 28.0; __RequestVerificationToken=itQ6HqqB_D7H_Y924w-HFfF8tq
ASP.NET_SessionId=cnj4lzpunuxnbyunl1m5gtpn
Glimpse-Parent-RequestID:04a1b6d2-6c6a-4da0-936d-3ff39e5b8c6c
Host:localhost:54434
Origin:http://localhost:54434
Referer:http://localhost:54434/1328/uploads/new
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
------WebKitFormBoundarysX8tBB9TH4BzWZsG
Content-Disposition: form-data; name="__RequestVerificationToken"

dmPL-YRqsiwjKy43rlkYIBJE4kPlthsyL0IgnyHbtrD7Doczpbu9Z1SYeoL_93vuR15-6HfpNCCEzkzLYHBIxFJOQd3ynRGGYqILGpMWdLE1
------WebKitFormBoundarysX8tBB9TH4BzWZsG
Content-Disposition: form-data; name="private_upload"

true
------WebKitFormBoundarysX8tBB9TH4BzWZsG
Content-Disposition: form-data; name="files[]"; filename="Maid with the Flaxen Hair.mp3"
Content-Type: audio/mp3


------WebKitFormBoundarysX8tBB9TH4BzWZsG
Content-Disposition: form-data; name="files[]"; filename="Sleep Away.mp3"
Content-Type: audio/mp3


------WebKitFormBoundarysX8tBB9TH4BzWZsG--
Response Headersview source
Cache-Control:private, s-maxage=0
Content-Encoding:gzip
Content-Length:57
Content-Type:application/json; charset=utf-8
Date:Fri, 16 Aug 2013 10:55:23 GMT
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:4.0
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcU3VydmVudHJpeFxhcHBcU3VydmVudHJpeFxGYXN0U3VydmV5b3JzXDEzMjhcdXBsb2Fkc1xuZXc=?=

````

Dropzone 配置为：

<script type="text/javascript">
        Dropzone.autoDiscover = false;

        var myDropzone = new Dropzone("form#my-awesome-dropzone", {
            paramName: "files", // The name that will be used to transfer the file
            autoProcessQueue: false,
            forceFallback: false,
            uploadMultiple: true,
            maxFilesize: 10,
            previewsContainer: ".dropzone-previews",
            clickable: ".dropzone" //make only this region clickable
        });

        myDropzone.on("addedfile", function (file) {
            /* Maybe display some more file information on your page */
            console.debug("added a file: " + file.name);
        });

        myDropzone.on("success", function (file) {
            $("#drop-success").show();
        });

        $("#btnDropzone").click(function () {
            myDropzone.processQueue();
        });
    });
</script>

如何在控制器中获取每个上传的文件以便进行处理？

Answer 1

如果输入名称file[]确实是问题所在，那么您可以将Dropzone选项uploadMultiple设置为false。这将创建多个请求并单独发送每个文件，而不是在一个请求中发送所有并行上传的文件。

Answer 2

以下解决方案适用于 dropzone 3.7.3。

要解决此问题，请在 dropzone.js 中更改此行：

formData.append("" + this.options.paramName + (this.options.uploadMultiple ? "[]" : ""), file, file.name);

到

formData.append("" + this.options.paramName + (this.options.uploadMultiple ? "[" + _l + "]" : ""), file, file.name);

不要忘记包含这个非缩小版本。

我会尝试在 github 上向 Enyo 推荐这个补丁。

Answer 3

将此属性 enctype="multipart/form-data" 添加到您的表单中

--编辑

您需要添加此选项

并行上传：10 只会上传在 parallelUploads 选项中指定的文件数量。 parallelUploads 的标准值似乎是 2。

这不是一个好的解决方案，因为您不知道要上传多少文件

所以我已经编辑了

  $("#btnDropzone").click(function () {

        var fileCount = myDropzone.files.length;
        alert(fileCount);
        alert(fileCount % myDropzone.options.parallelUploads);
        var loopsCount = fileCount / myDropzone.options.parallelUploads;

        if (fileCount % myDropzone.options.parallelUploads != 0) {
            loopsCount = loopsCount + 1;
        }

        alert(loopsCount);
        for (var i = 0; i < loopsCount ; i++) {
            alert(i);
            myDropzone.processQueue();
        }


    });

Answer 4

我遇到了同样的问题。我将 mvc 操作替换为

        for (int arquivo = 0; arquivo < Request.Files.Count; arquivo++)
        {
            HttpPostedFileBase file = Request.Files[arquivo];

            //...

        }

现在它可以正常工作了。