Question

我正在使用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次？

Answer 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个属性的视图模型并强烈绑定到您的模型，以便您也可以进行验证。

Dropzone仅上传第一张图片

1 个答案: