Я использую 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,
uploadMultiple: true,
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", "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;
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.
});
для этой модели im:
public HttpPostedFileBase[] files { get; set; }