与其他表单数据组合时不随dropzone.js发布的文件
与其他表单数据组合时不随dropzone.js发布的文件
提问于 2016-09-15 14:09:52
我正在做一些类似于这个帖子dropzoneForm data with file的事情。我正在使用MVC 5/Razor语法。在调试时，我能够成功地看到我的模型数据，但是我的Request.Files总是0。
在我的create.cshtml中，有类似于此的代码。我的模型很大，所以我不包括所有的东西。
@using (Html.BeginForm())
@Html.AntiForgeryToken()
<div class="container">
<div class="dropzone" id="myDropzone"> HERE </div>
<div class="row botborder paddbot" id="addbuilder" style="display:none">
<div class="form-group">
<div class="col-md-4 ">
<span class="control-label ">Builder Name</span>
<span class="glyphicon glyphicon-asterisk text-danger" aria-hidden="true"></span>
@Html.EditorFor(model => model.BuilderModel.Builder, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.BuilderModel.Builder, "", new { @class = "text-danger" })
</div>
<div class="col-md-4 ">
<span class="control-label">Builder's WebSite</span>
@Html.EditorFor(model => model.BuilderModel.BuilderWebSite, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.BuilderModel.BuilderWebSite, "", new { @class = "text-danger" })
</div>
<div class="col-md-4 ">
<span class="control-label">Builder's Phone</span>
@Html.EditorFor(model => model.BuilderModel.BuilderPhone, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.BuilderModel.BuilderPhone, "", new { @class = "text-danger" })
</div>
</div>
</div>“行尾”
你可以看到这个想法..。我刚刚在表单中添加了一个div，让用户也可以删除这些文件。
在create.cshtml中，我还有以下JS代码
Dropzone.options.myDropzone = {
url: 'ReviewModels/Create',
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 5,
maxFiles: 5,
maxFilesize: 1,
acceptedFiles: 'image/*',
addRemoveLinks: true,
init: function () {
dzClosure = this;
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submit-all").addEventListener("click", function (e) {
alert('sub1');
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function (data, xhr, formData) {
alert(formData)
});
}
}在控制器中，我有以下代码，request.files没有显示任何文件，但是模型数据正在顺利地通过。我不知道我错过了什么。任何帮助都将不胜感激，如果我能提供更多的信息，我将这样做。谢谢
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(HolderModel review)
{
if (review.BuilderModel.Builder ==null)
// if select existing builder
{
foreach (string fileName in Request.Files)
{
HttpPostedFileBase file = Request.Files[fileName];
//Save file content goes here
var fName = file.FileName;
}回答 1
Stack Overflow用户
发布于 2016-09-18 20:56:16
你需要做两件事：
- 设置表单id
myDropZone，以便在初始化Dropzone时匹配。不要在名为myDropZone的表单中创建单独的div - 使其成为多部分/表格数据
您的@使用应该如下所示：
@using (Html.BeginForm("ActionMethodName", "ControllerName", FormMethod.Post, new
{
enctype = "multipart/form-data",
id = "myDropZone"
}))您不必自己做任何xhr工作就可以发送表单数据，Dropzone在同一个请求中同时发送文件和表单值。
添加一个按钮来提交所有数据(在表单标记中的某个位置)：
<button id="btnStartUpload">Upload All</button>然后在你的Dropzone中，它需要存在：
init: function () {
var myDropzone = this;
var submitButton = document.getElementById("btnStartUpload");
submitButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
$("#StartOrCancel").hide();
myDropzone.processQueue();
myDropzone.options.autoProcessQueue = true;
});
...请注意，
e.preventDefault();
e.stopPropagation();是非常重要的，否则您将得到双重表单提交，一个通过Dropzone的xhr，另一个通过一个完整的帖子
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39513292
复制相关文章
相似问题
腾讯云开发者
