Dropzone未绑定到模型 [英] Dropzone not bound to model

问题描述

我正在使用dropzone.js以包含其他字段的形式上传文件.

I'm using dropzone.js to upload files in a form that include other fields.

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.DropDownListFor(x => x.installation, Model.installationList, new { data_placeholder = "Select one item please" })
    @Html.ValidationMessageFor(model => model.installation, "", new { @class = "text-danger" })

<div id="files" name="files" class="dropzone"></div>

<input type="submit" value="@Resources.Global.Save" class="btn btn-default" />
}

JS:

Dropzone.options.files = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,

            paramName: "files", // The name that will be used to transfer the file
            maxFilesize: 8, // MB
            url: "/ActionPlan/Home/Create"  // Same as URL generated from the form
        };

我的模特:

        // installation 
        [Display(Name = "Anomaly_Installation", ResourceType = typeof(Resources.ActionPlan))]
        public int installation { get; set; }
        public IEnumerable<SelectListItem> installationList { get; set; }

// files uploaded
        public HttpPostedFileBase[] files { get; set; }

提交表单时，没有文件附加到模型，但是来自位置的数据还可以，为什么?如何解决此问题?

When I submit the form, no files are attached to the model, but data from location is OK, why? How to fix this issue?

编辑:我进行了一些更改，但存在相同的问题:

EDIT: I've made some changes but same issue:

HTML(剃刀)

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

我添加了:

<div class="dropzone-previews"></div>
                <div class="fallback">
                    <!-- this is the fallback if JS isn't working -->
                    <input name="files" type="file" multiple />
                </div>

JS

Dropzone.options.files = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 25,
            maxFiles: 25
        };

当我检查发送的标头时，我没有看到任何文件(这是整个表单):

When I inspect headers sent, I didn't see any files (this is the entire form):

------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="__RequestVerificationToken"

hQJmhZpJf0LqOo3ZZCgCUjMafbXdjNGmzM8QrnL2bjtWUerKZiyJakNJljNsM_DowRv5641qUyc0zjRcBIUh2I1AZ2LBBYko8UzrhPFvnzeWELBVBLwTmtfo6KUX5MChk_aIKvX-aEcpremYXJps1A2
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomalyId"

0
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="beginDate"

09/04/2015
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomaly"

wsqfdgsqdfsqz
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="analysis"

wsdwsdfg
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomalyTypeSelected"

2
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="piloteSelected"

52333
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomalyOriginSelected"

3
------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="anomalyOriginData"


------WebKitFormBoundaryAKklxx9XCCYQ22Zl
Content-Disposition: form-data; name="installation"

1
------WebKitFormBoundaryAKklxx9XCCYQ22Zl--

最终解决方案: HTML:

FINAL SOLUTION: HTML:

@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", id = "myForm" }))
{
...
<div class="fallback">
                    <!-- this is the fallback if JS isn't working -->
                    <input name="files" type="file" multiple />
                </div>
}

JS: Dropzone.autoDiscover = false;

JS : Dropzone.autoDiscover = false;

        var myDropzone = new Dropzone('#myForm', {
            paramName: 'files',
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 25,
            maxFiles: 25
        });

        $("form").on("submit", function (event) {
            myDropzone.processQueue(); // Tell Dropzone to process all queued files.
        });

为此我的模型:

public HttpPostedFileBase[] files { get; set; }

推荐答案

我猜想您指定的选项永远不会应用.这就可以解释为什么在提交表单(上载时已经对其进行处理)之后，没有文件附加到模型上的原因. 要正确应用所需的选项，您需要关闭Dropzone中的自动发现功能:

I guess the options you specified never get applied. That would explain why no files are attached to your model once you submit the form as they were already processed on upload. To proper apply the desired options you need to turn off the auto discovery function from Dropzone:

Dropzone.autoDiscover = false;

那样，您必须以编程方式初始化 Dropzone:

That way you have to programmatically initialize Dropzone:

var myDropzone = new Dropzone('form', {
    paramName: 'files',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 25,
    maxFiles: 1
});

演示

autoProcessQueue

设置为false时，您必须自己调用myDropzone.processQueue()才能上载已删除的文件.有关处理队列的更多信息，请参见下文.

When set to false you have to call myDropzone.processQueue() yourself in order to upload the dropped files. See below for more information on handling queues.

这篇关于Dropzone未绑定到模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！