twitter-bootstrap 如何使用 mvc4 形式在 dropzone.js 中配置自定义上传区域

how to configure custom upload area in dropzone.js with mvc4 form

提问by kiev

I just started looking into dropzone.jsIs it possible to somehow modify the previewTemplatearea to add additional info about the files uploaded and then submit the form to an mvc method?

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

For simplicity I want to add two fields DocumentTypeIDand ExpirationDatefor each file that a user wants to upload

为简单起见，我想为用户想要上传的每个文件添加两个字段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>
}

---

---

Here is the controller method which for now should accept one file at a time

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

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


    }

---

---

Now the Js function for dropzone

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

Thanks for looking!

感谢您的关注！

回答by Gandarez

have you tried to handle the event 'sending'?

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

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

MVC controller

MVC控制器

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

I've been using also MVC 4 and it has worked well.

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