CodeGo.net> Dropzone的,我怎么提交表格的数据和多个图像？

我在ASP.NET中使用MVC,并且在视图中需要拖放.当图像被删除以验证它们并向用户显示确定时,我想在控制器中调用一个函数.当用户完成信息输入并放下适当的图像时,他/她单击“Fortsæt”(继续),并在表单上提交呼叫.

放置Image时应调用此方法.

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

用户单击“继续”时应调用此选项

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

标签：file-upload,drag-and-drop,asp-net,javascript,c
来源： https://codeday.me/bug/20191121/2051828.html