javascript - DropZone.js 使用 ASP.Net MVC 上传多个文件

Question

我正在使用 javascript 库 DropZone.js但是上传多个文件在某种程度上不适用于 ASP.Net MVC。

有效的方法是当我设置 Dropzone 选项“autoProcessQueue: true”和 MVC Controller 参数名称“inputFiles”时可以看到输入文件已成功上传到服务器。然而，这意味着图片的上传是自动发生的，用户没有机会点击表单提交按钮。 (我认为这就是他们称之为 DROPZone - 自动上传的原因)

无论如何，我想让用户在任何上传发生之前点击提交按钮，所以我设置了选项“autoProcessQueue: false”，但是在表单提交时，Controller 的参数名称“inputFiles”总是返回 null。

        <form action="/home" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
            <div class="form-group form-actions">
                <div class="col-md-9 col-md-offset-4">
                    <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
                </div>
            </div>
        </form>

<script>
    $(function () {
        Dropzone.options.dropzoneForm = {
            paramName: "inputFiles", // The name that will be used to transfer the file
            autoProcessQueue: true,
            uploadMultiple: false,
            parallelUploads: 100,
            accept: function (file, done) {
                done();
            }
        };
    });
</script>



[HttpPost]
    public ActionResult Index(IEnumerable<HttpPostedFileBase> inputFiles)
    {
        string fName = "";

        foreach (HttpPostedFileBase fileName in inputFiles)
        {
            HttpPostedFileBase file = fileName;
            //Save file content goes here
            fName = file.FileName;
            if (file != null && file.ContentLength > 0)
            {

                var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

                string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

                var fileName1 = Path.GetFileName(file.FileName);

                bool isExists = System.IO.Directory.Exists(pathString);

                if (!isExists)
                    System.IO.Directory.CreateDirectory(pathString);

                var path = string.Format("{0}\\{1}", pathString, file.FileName);
                file.SaveAs(path);
            }

        } 

        return View();
    }

有人试过使用 DropZone.js 吗？

Answer 1

除了在你的 Action 中使用参数，你可以使用这个:

[HttpPost]
public ActionResult Index()
{
    string fName = "";

    foreach (var fileName in Request.Files.AllKeys)
    {
        var file = Request.Files[fileName];
        //Save file content goes here
        fName = file.FileName;
        if (file != null && file.ContentLength > 0)
        {

            var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

            string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

            var fileName1 = Path.GetFileName(file.FileName);

            bool isExists = System.IO.Directory.Exists(pathString);

            if (!isExists)
                System.IO.Directory.CreateDirectory(pathString);

            var path = string.Format("{0}\\{1}", pathString, file.FileName);
            file.SaveAs(path);
        }

    } 

    return View();
}

等等......不确定它是否有效..无法尝试但这个想法是可用的

Request.Files

希望对您有所帮助!