C# Dropzone，如何提交包含数据和多个图像的表单？

我正在ASP.NET中使用MVC，希望在视图中进行拖放。当图像被删除时，我想调用控制器中的一个函数来验证它们，并向用户显示OK。当用户完成输入信息并删除相应图像后，他/她单击“Fortsæt”（继续）并在表单上调用submit

删除图像时应调用此方法

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

当用户单击“继续”时，应调用此函数

以下是我的一些观点

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

@model.portal.Models.Database.FleaMarket
@使用（Html.BeginForm（“创建”、“跳蚤市场”、方法：FormMethod.Post、htmlAttributes:new{@encType=“multipart/formdata”、@class=“dropzone”、@id=“dropzoneForm”}））
{
@Html.AntiForgeryToken（）
@Html.ValidationSummary（true）
@Html.HiddenFor（model=>model.HostId）
@LabelFor（model=>model.HostId，“Arrangør”）
@DisplayFor（model=>model.Host.UserProfile.UserName）
@LabelFor（model=>model.Name）
@EditorFor（model=>model.Name）
@Html.ValidationMessageFor（model=>model.Name）
@LabelFor（model=>model.Description）
@EditorFor（model=>model.Description，新的{@class=“TextAreaInput”}）
@Html.ValidationMessageFor（model=>model.Description）
...
...
钢坯连铸机
把你的照片放在这里
...
...
@Resources.Views\u Global\u继续
@Resources.Views\u Global\u取消
@节脚本{
@Scripts.Render（“~/bundles/datepicker”）
@Scripts.Render（“~/bundles/booking”）
@Scripts.Render（“~/bundles/dropZoneDescripts”）
$（文档）.ready（函数（）{
$（.form_date”）.datetimepicker（{format:'yyyy-mm-dd'，startView:2，minView:2}）；
$（“.form_time”）.datetimepicker（{format:'hh:ii'，startView:1，maxView:1}）；
});
Dropzone.options.dropzoneForm={
可点击：false，
//url:“/FleaMarket/UploadImages”，
自动处理队列：false，
uploadMultiple:true，
paramName:“images”，//必须与上载操作所需的HttpPostedFileBase参数的名称匹配
最大文件数：100，
自动队列：false，
PreviewContainer:#dropzonePreview“，
并行上传：100，
init：函数（）{
调试器；
this.on（“success”，函数（文件，responseText）{
appendChild（document.createTextNode（responseText））；
});
}
};

我花了太多的时间试图弄明白这一点，我相信可能有一个简单的解决办法-我只是不知道。有人能帮我弄明白吗

---

非常感谢。

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

Dropzone.autoDiscover=false；
$（“div#dropzonePreview”）.dropzone(
{
url:“/FleaMarket/UploadImage”，
参数名称：“图像”，
自动处理队列：true，
addRemoveLinks：是的，
//可点击：“dropzonePreview”，
uploadMultiple:true，
acceptedFiles:“image/*”，
最大文件数：100，
并行上传：10，
措辞验证文件类型：“详细信息和账单”，
dictFileTooBig：“斯托特的账单”，
成功：函数（文件、响应）{
$（'#ImageIds'）.val（$（'#ImageIds'）.val（）+，“+response.Ids）；
完成（）；
}
});
@Html.HiddenFor（model=>model.ImageIds）；
钢坯连铸机

你有没有想过这个问题？我正处于同样的情况，我想把af模型和图像一起发布，只是在一个引导向导中…因为你花了太多的时间！

 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>