我正在使用dropzone.js以包含其他字段的形式上传文件.
@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; }
当我提交表单时,没有文件附加到模型,但位置的数据是可以的,为什么?如何解决这个问题?
编辑:我做了一些修改,但同样的问题:
HTML(Razor)
@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,parallelUploads: 25,maxFiles: 25 };
------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:
@using (Html.BeginForm("Create",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;
var myDropzone = new Dropzone('#myForm',{ paramName: 'files',autoProcessQueue: false,maxFiles: 25 }); $("form").on("submit",function (event) { myDropzone.processQueue(); // Tell Dropzone to process all queued files. });
为了这个我的模型:
public HttpPostedFileBase[] files { get; set; }
解决方法
我猜你指定的选项永远不会被应用.这将解释为什么在提交表单后,在上传时已处理表单时,为什么没有文件附加到模型中.
要正确应用所需的选项,您需要关闭Dropzone的 auto discovery function:
要正确应用所需的选项,您需要关闭Dropzone的 auto discovery function:
Dropzone.autoDiscover = false;
这样你必须要programmatically initialize Dropzone:
var myDropzone = new Dropzone('form',{ paramName: 'files',maxFiles: 1 });
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.