Dropzone 仅上传第一张图片答案

【问题标题】：Dropzone uploads only first imageDropzone 仅上传第一张图片
【发布时间】：2015-10-25 17:13:16
【问题描述】：

我正在使用dropzone 插件。但它只记得第一张图片的路径。如果我在 dropzone 中放置 5 个图像文件。它将保存第一个文件 5 次。

我的 HTML 代码是：

<form id="my-awesome-dropzone" class="dropzone" action="@Url.Action("FileUploadHandler", "Electronics")" method="post" enctype="multipart/form-data">
    <input type="hidden" name="adId" value="1076" />
    <input type="text" name="name" />
    <div id="dropzonePreview" style="color:white" class="dz-default dz-message">
    </div>
    <button type="submit" id="abc" class="btn btn-primary pull-right">Submit this form!</button>
</form>

我的js代码是：

Dropzone.options.myAwesomeDropzone = { 
                autoProcessQueue: false,
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,
                addRemoveLinks: true,
                clickable:'#dropzonePreview',
                init: function () {
                    var myDropzone = this;
                    this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        myDropzone.processQueue();
                    });
               }
       }

我的 MVC 函数是：

public ActionResult FileUploadHandler()
        {
            int adid =int.Parse( Request["adId"] );
            var name = Request["name"];
            int count = 1;
            var imaa = db.AdImages.ToList();
            foreach (var img in imaa)
            {
                System.IO.File.Delete(Server.MapPath(@"~\Images\Ads\" + adid + "_" + count++ + img.imageExtension));
            }
            count = 1;
            foreach (var fileKey in Request.Files.AllKeys)
            {
                var file = Request.Files[fileKey];
                try
                {
                    if (file != null)
                    {
                        HttpPostedFileBase file1 = file;
                        string extension = System.IO.Path.GetExtension(file1.FileName);
                        file.SaveAs(Server.MapPath("~/Images/Ads/" + adid + "_" + count++ + extension));
                        AdImage image = new AdImage();
                        image.imageExtension = extension;
                        image.adId = adid;
                        db.AdImages.Add(image);
                        db.SaveChanges();
                    }
                }
                catch (Exception ex)
                {
                    return Json(new { Message = "Error in saving file" });
                }
            }
            return Json(new { Message = "File saved" });
        }

我做错了什么？为什么它只保存第一张图片n 次？

【问题讨论】：

标签： jquery asp.net-mvc dropzone.js

【解决方案1】：

您的表单正在回发多个同名文件，因此 Request.Files.AllKeys 包含一个集合，其中键的值都相同，因此 var file = Request.Files[fileKey]; 始终获取第一个文件。

将代码更改为

for(int i = 0; i < Request.Files.Count; i++)
{
  HttpPostedFileBase file = Request.Files[i];
  string extension = System.IO.Path.GetExtension(file.FileName);
  ....
}

或者，将您的方法更改为

public ActionResult FileUploadHandler(int adId, string name, IEnumerable<HttpPostedFileBase> ###)
{
  ....
  foreach(HttpPostedFileBase file in ###)
  {
    ....
  }
}

其中### 是您生成的文件输入的名称属性（即您当前在Request.Files.AllKeys 中看到的值

这样所有参数都被正确绑定，您不需要使用Request]。更好的是，使用包含这 3 个属性的视图模型并强烈绑定到您的模型，以便您也获得验证。

【讨论】：