我正在制作复杂的表单,我想使用多个(不同的)dropzone.js来上传文件。
以下是我的制作方法:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
... form elements...
<div id="files" name="files" class="dropzone"></div>
}
以及JS:
Dropzone.options.files = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 8, // MB
url: "/pathToAction"
};
我想同时发送表单的文件和数据,所有映射到控制器的对象,但dropzone需要有"url"才能接受文件上传。。。如何解决此问题?也许我可以获取表单元素的url并将其放入url参数中?
当我在谷歌上搜索时,没有办法用相同的URL发送多个"dropzone"的一个请求,所以我通过以下步骤手动解决了这个问题:
1) Dropzone实际上将图像更改为Base64字符串以进行缩略图预览,然后将该字符串添加到"img"标记的源中。因此,您需要读取图像"src"one_answers"alt",并将它们添加到动态隐藏的输入类型中,如下所示:
$('#btnUpload').on('click', function () {
$.each($("img[data-dz-thumbnail]"), function( index, value ) {
$('<input>').attr({
type: 'hidden',
name: 'myHiddenFiles[' + index + '].Key',
value: $(value).attr("alt")
}).appendTo('#newsForm');
$('<input>').attr({
type: 'hidden',
name: 'myHiddenFiles[' + index + '].Value',
value: $(value).attr("src")
}).appendTo('#upload-Invoices');
});
$("#upload-Invoices").submit();
});
对每个需要发布数据的投递区重复此代码。
2) 在您的操作方法中,您需要添加一个类型为"Dictionary"的参数,以便获得Base64字符串格式的文件名和文件内容。然后,您可以将Base64字符串解析为图像,将其存储为文件,并将表单数据保存到数据库中。您可以看到相关的代码片段如下:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(ModelClass model, IDictionary<string, string> myHiddenFiles)
{
if (ModelState.IsValid)
{
foreach (var file in myHiddenFiles)
{
var base64 = file.Value.Substring(file.Value.IndexOf(',') + 1).Trim(' ');
var bytes = Convert.FromBase64String(base64);
var saveFile = Server.MapPath("~/Images/" + file.Key);
System.IO.File.WriteAllBytes(saveFile, bytes);
// Save your model to database....
}
}
return View();
}
您可以使用@Url.action助手创建操作路径
...
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 8, // MB
url: "@Url.Action("actionname")"
};