Dropzone,我如何与数据和多个图像提交表单

Dropzone, how do I submit form with data and multiple images?

本文关键字:图像 提交 表单 数据 Dropzone      更新时间:2023-09-26

我在ASP中使用MVC。. NET并希望在我的视图中拖放。我想在我的控制器中调用一个函数,当图像被删除以验证它们并向用户显示OK。当用户完成输入信息并删除相应的图像时,他/她点击"Fortsæt"(继续)并在表单上调用提交。

此方法应在删除图像时调用。

[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);
    }

这个函数应该在用户点击"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");
    }

这是我的视图的一些片段

@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>

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

提前感谢。

每次上传图像时,我都在控制器中调用一个方法。我给图像分配了一个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>