asp.net-mvc - 与其他表单数据结合时，文件未与 dropzone.js 一起发布

Question

我正在做与这篇文章类似的事情 dropzoneForm data with file .我正在使用 MVC 5/Razor 语法。调试时我能够成功看到我的模型数据，但是我的 Request.Files 始终为 0。

在我的 create.cshtml 中，我有类似的代码。我的模型很大，所以我没有包括所有内容。

@using (Html.BeginForm())

@Html.AntiForgeryToken()
<div class="container">
<div class="dropzone" id="myDropzone"> HERE </div>
<div class="row botborder paddbot" id="addbuilder" style="display:none">
    <div class="form-group">
        <div class="col-md-4 ">
            <span class="control-label ">Builder Name</span>
            <span class="glyphicon glyphicon-asterisk text-danger" aria-hidden="true"></span>
            @Html.EditorFor(model => model.BuilderModel.Builder, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.BuilderModel.Builder, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-4 ">
            <span class="control-label">Builder's WebSite</span>
            @Html.EditorFor(model => model.BuilderModel.BuilderWebSite, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.BuilderModel.BuilderWebSite, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-4 ">
            <span class="control-label">Builder's Phone</span>
            @Html.EditorFor(model => model.BuilderModel.BuilderPhone, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.BuilderModel.BuilderPhone, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

@行尾@

您可以看到这个想法。我刚刚在表单中添加了一个 div，以便用户也可以删除文件。

在 create.cshtml 中，我还有以下 JS 代码

Dropzone.options.myDropzone = { 
    url: 'ReviewModels/Create',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function () {
        dzClosure = this; 
        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function (e) {
            alert('sub1');
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function (data, xhr, formData) {
            alert(formData)
        });
    }
}

在 Controller 中，我有以下代码，并且 request.files 没有显示任何文件，但模型数据已成功通过。我不确定我错过了什么。任何帮助将不胜感激，如果我能提供更多信息，我会这样做。谢谢

 [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(HolderModel review)
    {
         if (review.BuilderModel.Builder ==null)
            // if select existing builder
        {
            foreach (string fileName in Request.Files)
            {
                HttpPostedFileBase file = Request.Files[fileName];
                //Save file content goes here
                var fName = file.FileName;
            }

Answer 1

你需要做两件事:

设置表单ID myDropZone所以它会在初始化 Dropzone 时匹配。 不要在名为 myDropZone 的表单中创建单独的 div

使其成为 multipart/form-data

您的 @using 应该如下所示:

@using (Html.BeginForm("ActionMethodName", "ControllerName", FormMethod.Post, new
{
  enctype = "multipart/form-data",
  id = "myDropZone"
}))

您不必自己做任何 xhr 工作来发送表单数据，Dropzone 在同一个请求中发送文件和表单值。

添加一个按钮来提交所有数据(在表单标签中的某处):

<button id="btnStartUpload">Upload All</button>

然后在您的 Dropzone init 中，这需要存在:

    init: function () {
    var myDropzone = this;
    var submitButton = document.getElementById("btnStartUpload");

    submitButton.addEventListener("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        $("#StartOrCancel").hide();

        myDropzone.processQueue();
        myDropzone.options.autoProcessQueue = true;
    });
...

注意

    e.preventDefault();
    e.stopPropagation();

非常重要，否则您将获得双重表单提交，一个通过 Dropzone 的 xhr，第二个通过完整的 POST