javascript - 如何使用 mvc4 表单在 dropzone.js 中配置自定义上传区域

Question

我刚开始研究 dropzone.js 是否有可能以某种方式修改 previewTemplate 区域以添加有关上传文件的附加信息，然后将表单提交到 mvc方法？

为简单起见，我想为用户要上传的每个文件添加两个字段DocumentTypeID 和ExpirationDate

@model MyProject.Model.Document

@using (Html.BeginForm("Create", "Document", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", @id = "my-awesome-dropzone" }))
{

<div class="row-fluid">
    <fieldset class="span6">  
        <div class="editor-label">
            @Html.LabelFor(model => model.DocumentTypeID, "DocumentType")
        </div> 
        <div class="editor-field">
            @Html.DropDownList("DocumentTypeID", String.Empty)
            @Html.ValidationMessageFor(model => model.DocumentTypeID)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ExpirationDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ExpirationDate)
            @Html.ValidationMessageFor(model => model.ExpirationDate)
        </div>
    </fieldset>
    <div class="span6">   <div class="dropzone-previews"></div> </div>
</div>
}

---

这是 Controller 方法，现在应该一次接受一个文件

    [HttpPost]
    public ActionResult Create(Document document, HttpPostedFileBase file)
    {
        if (ModelState.IsValid && file != null)
        {

            db.Documents.Add(document);
            document.FilePath = ProcessDocumentUpload(Request.Files[0], document.DocumentID);

            db.SaveChanges();
            return "";//? // not sure what to return yet
        }


    }

---

现在的 dropzone 的 Js 函数

    <script type="text/javascript">
    $(function () {
       // "myAwesomeDropzone" is the camelized version of the HTML element's ID
        Dropzone.options.myAwesomeDropzone = {
            autoDiscover: false,
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 5, // MB
            maxFiles: 1, //for now upload one at a time
           //I started looking at the template and added two elements as an experiment.
            previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n <input type=\"text\" data-dz-doc-expiration-date class=\"dz-doc-input\" />\n <select class=\"dz-doc-input\" data-dz-doc-document-type-id  ></select>\n   <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span>✔</span></div>\n  <div class=\"dz-error-mark\"><span>✘</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
            //dictDefaultMessage: "Drop files here to upload or click",
            // The configuration that allows the whole form to be submitted on button click
            autoProcessQueue: false,
            uploadMultiple: false,
            parallelUploads: 1,
            addRemoveLinks: true,
            previewsContainer: ".dropzone-previews", //show a preview in another place
           // The setting up of the dropzone
            init: function () {
                var myDropzone = this;

                // First change the button to actually tell Dropzone to process the queue.
                $("input[type=submit]").on("click", function (e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
                // of the sending event because uploadMultiple is set to true.
                this.on("sendingmultiple", function () {
                    // Gets triggered when the form is actually being sent.
                    // Hide the success button or the complete form.
                });
                this.on("successmultiple", function (files, response) {
                    // Gets triggered when the files have successfully been sent.
                    // Redirect user or notify of success.
                });
                this.on("errormultiple", function (files, response) {
                    // Gets triggered when there was an error sending the files.
                    // Maybe show form again, and notify user of error
                });

            },
            accept: function (file, done) {
                //maybe do something here for showing a dialog or adding the fields to the preview?

            }
        };

    });
</script>

感谢您的关注!

Answer 1

您是否尝试过处理“发送”事件？

$dropzone.on('sending', function (file, xhr, formData) {
    formData.append('id', $id);
});

MVC Controller

public JsonResult UploadImage(string id)
{
    for (int i = 0; i < Request.Files.Count; i++)
    {
        HttpPostedFileBase file = Request.Files[i];
        ...
    }           
    return Json(true, JsonRequestBehavior.DenyGet);
}

我也一直在使用 MVC 4，它运行良好。