Dropzone.js每次请求仅一次上传2个文件

时间:2019-01-22 21:54:19

标签: .net asp.net-mvc dropzone.js

我正在使用DZ在.NET MVC Web应用程序中上载声音文件和图像。我需要实现一个请求,一次将所有选定的文件上传。据我了解,要实现这一目标,应该使用DZ属性uploadMultiple和parallelUploads。但是,将两个属性都设置为true无效。

我的HTML:

@using (Html.BeginForm("UploadSound", "ManageFiles", FormMethod.Post, new { @class = "dropzone", id = "dropzoneSound", enctype = "multipart/form-data" }))
{
    <input type="hidden" name="soundId" id="sId" value="0" />
    <div class="fallback" multiple="multiple">
        <input type="hidden" name="file" value="" />
    </div>
}

我的终点:

[HttpPost]
public ActionResult UploadSound(int soundId)
{
    var storedFilenames = new List<string>();

    if (soundId > 0)
    {
        checkFolderExist(Server.MapPath("~/sounds/" + soundId), new List<string>());

        for(int i = 0; i < Request.Files.Count; i++){
            storedFilenames.Add(SaveFile(Server.MapPath("~/sounds/" + soundId), Request.Files[i]));
        }

        return Json(new { message = storedFilenames });
    }
} 

下面的代码触发端点,但是一次只能上传2个文件。端点将被调用,直到所有文件都已上传。

Dropzone.options.dropzoneSound = {
        addRemoveLinks: true,
        autoProcessQueue: true,
        uploadMultiple: true,
        maxFilesize: 16, //MB
        maxFiles: 6,
        parallelUploads:6,

        removedfile: function (file) {
            var self = this;
            var s = document.getElementById('soundFile');
            var param = {
                "filename": s.value,
                "soundId": 0
            };
            $.ajax({
                type: 'POST',
                url: '@Url.Action("DeleteSoundFile", "ManageFiles")',
                data: JSON.stringify(param),
                dataType: "json",
                contentType: 'application/json',
                success: function (data) {
                    var soundFileHTML = document.getElementById('soundFile');

                    var _ref;

                    return ((_ref = file.previewElement) != null && _ref.parentNode != null) ? _ref.parentNode.removeChild(file.previewElement) : null;
                }
            });
        },

        init: function () {
            this.on("addedfile", function () {
                if (this.files[9] != null) {
                    this.removeFile(this.files[0]);
                }
            });

            //DZ only uploads 2 files at a time. when 2 files have been uploaded autoProcessQueue has to be set again to trigger next files to upload, if any
            this.on("processing", function (data) {
                this.options.autoProcessQueue = true;
            });

            this.on("complete", function (data) {

                if (data.xhr != undefined) {
                    var res = JSON.parse(data.xhr.responseText);

                    var sIds = document.getElementsByClassName('sId');

                    for (i = 0; i < sIds.length; i++) {
                        sIds[i].value = res.soundId;
                    }
                }
            });
        },
    };

使用下面的代码修改DZ时,请求不会到达端点:

Dropzone.options.dropzoneSound = {
        addRemoveLinks: true,
        autoProcessQueue: true,
        uploadMultiple: true,
        maxFilesize: 16, //MB
        maxFiles: 6,
        parallelUploads:6,

有人遇到相同的问题,或者有解决问题的方法吗? 非常感谢所有帮助!

0 个答案:

没有答案