Dropzone，如何提交带有数据和多个图像的表单?

I am using MVC in ASP.NET and want a Drag n Drop in my view. I would like to call a function in my controller when the images are dropped to verify them and show an OK to the user. When the user has finished typing in information and dropped the appropriate images he/she clicks "Fortsæt" (continue) and calls submit on the form.

我在ASP中使用MVC。在我的视图中拖拽n。当图像被删除时，我想调用控制器中的一个函数来验证它们，并向用户显示OK。当用户完成输入信息,把相应的图片点击他/她“Fortsæt”(继续)并调用提交表单。

This method should be called when an Image is dropped.

当删除图像时，应该调用此方法。

[HttpPost]
[Authorize(Roles = "host")]
public ActionResult UploadImages()
{
    bool suc;
    foreach (string s in Request.Files)
    {
        HttpPostedFileBase image = Request.Files[s];

        string fileName = Request.Headers["X-File-Name"];
        string fileExtension = "";
        if (!string.IsNullOrEmpty(fileName))
            fileExtension = Path.GetExtension(fileName);


        suc = Verify(fileExtension);
        }
        return Json(suc);
    }

This should be called when the user clicks "Continue"

当用户单击“Continue”时，应该调用它

    [HttpPost]
    [Authorize(Roles = "host")]
    public ActionResult Create(FleaMarket model, HttpPostedFileBase[] images)
    {
    ConditionallySetUser(model, User);

    foreach (var fileName in Request.Files)
    {
        HttpPostedFileBase file = Request.Files[fileName.ToString()];
        if (file != null && file.ContentLength > 0)
        {
            var image = HttpPostedFileBaseToByteArray(file);
            model.Images.Add(new FleaImage
                 {
                    Image = image, FleaMarketId = model.EventId
                 });
        }
    }

    db.FleaMarkets.Add(model);
    db.SaveChanges();

    ViewBag.HostID = new SelectList(db.Hosts, "HostId", "Name", model.HostId);
    TempData["market"] = model;
    return 

    RedirectToAction("AddStallImage", "FleaMarket");
    }

Here are some snips of my View

这里有一些我的观点。

@model FleaPortal.Models.Database.FleaMarket
    <link href="~/Content/basic.css" rel="stylesheet" />
    <link href="~/Content/dropzone.css" rel="stylesheet" />
    <script src="~/Scripts/dropzone.min.js"></script>

    @using (Html.BeginForm("Create", "FleaMarket", method: FormMethod.Post, htmlAttributes: new {             @encType = "multipart/form-data",@class="dropzone", @id="dropzoneForm"}))
    {

    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.HostId)
       <div class="row">
          <div class="form-group col-sm-6">
         @Html.LabelFor(model => model.HostId, "Arrangør")
         <label class="text-box single-line form-control" id="Name">
            @Html.DisplayFor(model => model.Host.UserProfile.UserName)
         </label>
      </div>

      <div class="form-group col-sm-6">
         @Html.LabelFor(model => model.Name)
         @Html.EditorFor(model => model.Name)
         @Html.ValidationMessageFor(model => model.Name)
      </div>
   </div>

    <div class="form-group col-sm-12">
        @Html.LabelFor(model => model.Description)
        @Html.EditorFor(model => model.Description, new { @class = "TextAreaInput" })
        @Html.ValidationMessageFor(model => model.Description)
    </div>
    ...
    ...
    <div class="form-group col-sm-12">
        <label>Stemningsbilleder</label>
        <div id="dropzonePreview">
            drop your images here
            <div class="dz-default dz-message" data-dz-message="">
            </div>
        </div>
    </div>
    ...
    ...
    <div class="btn-group two-bt-group col-sm-12">
        <button name="ButtonType" value="Continue" id="submitAll" type="submit" class="btn btn-success two-bt">@Resources.Views_Global_Continue</button>
        <button name="ButtonType" value="Cancel" type="button" class="btn btn-danger two-bt" onclick="location.href='@Url.Action("Manage", "Account")'">@Resources.Views_Global_Cancel</button>
    </div>
    @section Scripts {
    @Scripts.Render("~/bundles/datepicker")
    @Scripts.Render("~/bundles/booking")
    @Scripts.Render("~/bundles/dropzonescripts")

    <script type="text/javascript">
        $(document).ready(function() {
            $(".form_date").datetimepicker({ format: 'yyyy-mm-dd', startView: 2, minView: 2 });
            $(".form_time").datetimepicker({ format: 'hh:ii', startView: 1, maxView: 1 });
        });
    </script>
    <script>
        Dropzone.options.dropzoneForm = {
            clickable: false,
            //url: '/FleaMarket/UploadImages',
            autoProcessQueue: false,
            uploadMultiple: true,
            paramName: "images",// Must match the name of the HttpPostedFileBase argument that the Upload action expects
            maxFiles: 100,
            autoQueue: false,
            previewsContainer: "#dropzonePreview",
            parallelUploads:100,
            init: function () {
                debugger;
                this.on("success", function (file, responseText) {
file.previewTemplate.appendChild(document.createTextNode(responseText));
                });
            }
        };
  </script>

I have spent way too much time trying to figure this out, and I believe there might be a simple solution - I just don't know. ? Can someone help me figuring this out?

我花了太多的时间试图弄清楚这个问题，我相信可能有一个简单的解决方案——我只是不知道。吗?有人能帮我弄明白吗?

Many thanks in advance.

提前感谢。

1 个解决方案

#1

I ended up calling a method in my controller every time an image was uploaded. I assigned an ID to the imaged and passed it to my view like this:

每次上传图像时，我都会调用控制器中的一个方法。我给图像分配了一个ID，然后像这样传递给我的视图:

 Dropzone.autoDiscover = false;
        $("div#dropzonePreview").dropzone(
            {
                url: '/FleaMarket/UploadImage',
                paramName: "images",
                autoProcessQueue: true,
                addRemoveLinks: true,
                //clickable: "#dropzonePreview",
                uploadMultiple: true,
                acceptedFiles: "image/*",
                maxFiles: 100,
                parallelUploads: 10,
                dictInvalidFileType: "Dette er ikke et billede",
                dictFileTooBig: "Billedet er for stort",
                success: function(file, response) {
                    $('#ImageIds').val($('#ImageIds').val() + "," + response.Ids);
                    done();
                }
            });


@Html.HiddenFor(model => model.ImageIds);
<div class="form-group col-sm-12">
    <label>Stemningsbilleder</label>
    <div id="dropzonePreview" class="dropzone">
    </div>
</div>