如何使用 MVC4 表单在 Dropzone.js 中配置自定义上传区域

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

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

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

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

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

    }

现在 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>

感谢您的观看！