我想使用IFormFile在数据库中上传一些文档。在客户端,我正在使用Dropzone.js,但无法正常工作。每当我点击Submit按钮时,它将在参数中发送一个空值。我有两个查询。1.如何将文档(图像/ PDF)发送到操作方法。2.如何重新设计(更改样式)Dropzone。(如果有人解释了dropzone的流程,那将非常有用)
这是我的HTML代码
<form asp-action="AddDocument" asp-controller="Transactions" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
<div class="form-group form-actions">
<div class="col-md-9 col-md-offset-4">
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
</div>
</div>
</form>
JS代码:
$(function () {
Dropzone.options.dropzoneForm = {
paramName: "DocumentPhotos", // The name that will be used to transfer the file
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
accept: function (file, done) {
done();
}
};
});
这是我的服务器端语言代码:
[HttpPost]
public async Task<IActionResult> AddDocument(IEnumerable<IFormFile> DocumentPhotos)
{
if (DocumentPhotos!= null)
{
TransactionViewModel viewModel = new TransactionViewModel();
var documentModel = viewModel.TransactionModel.TransactionDocuemnt;
foreach (var item in DocumentPhotos)
{
using (MemoryStream stream = new MemoryStream())
{
await item.CopyToAsync(stream);
documentModel.DocumentPhoto = stream.ToArray();
}
documentModel.DocumentName = item.FileName;
documentModel.SrNo = 1;
documentModel.SocietyRid = UserSessionState.ApplicationUser.SocietyRid;
}
}
return PartialView("TransactionDocumentForm", transactionViewModel);
}
使用的脚本和CSS(所有文件均从Dropzone.js下载):
<link rel="stylesheet" href="~/css/basic.css" />
<link rel="stylesheet" href="~/css/dropzone.css" />
<script type="text/javascript" src="~/js/dropzone.js"></script>
<script type="text/javascript" src="~/js/dropzone-amd-module.js"></script>
如果将选项uploadMultiple
设置为true,则Dropzone会将[]
附加到paramName。在查看来自html5多个文件上传的请求后,我注意到该请求未将索引添加到文件名(文件[n])。 Dropzone.js可以做到这一点,因此可以解决。如果将paramName选项添加到Dropzone JS配置中,并让其调用返回文件的方法,则您将获得与html5多文件上传相同的行为。您还可以参考this link以获得有关Dropzone.js的配置选项的更多详细信息
function myParamName() {
return "DocumentPhotos";
}
Dropzone.options.dropzoneForm = {
paramName: myParamName,
//other configuration options
}
autoProcessQueue: false
告诉Dropzone删除文件时不要自动上传文件,因为默认情况下会自动上传。由于Dropzone现在不会自动上传文件,因此您需要在单击按钮时手动告诉它执行此操作。因此,您需要单击按钮的事件处理程序,该事件处理程序告诉Dropzone进行上传:
<button type="submit" id="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
var wrapperThis = this;
$("#submit").click(function (e) {
e.preventDefault();
wrapperThis.processQueue();
});
完整代码
<form asp-action="AddDocument" asp-controller="Home" method="post" enctype="multipart/form-data" class="dropzone dz-clickable form-horizontal form-bordered" id="dropzoneForm">
<div class="form-group form-actions">
<div class="col-md-9 col-md-offset-4">
<button type="submit" id="submit" class="btn btn-sm btn-primary"><i class="fa fa-floppy-o"></i> Upload</button>
</div>
</div>
</form>
@section Scripts
{
<link rel="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.js"> </script>
<script>
function myParamName() {
return "DocumentPhotos";
}
Dropzone.options.dropzoneForm = {
autoProcessQueue: false,
paramName: myParamName, // The name that will be used to transfer the file
uploadMultiple: true,
parallelUploads: 100,
init: function () {
console.log("active");
var wrapperThis = this;
$("#submit").click(function (e) {
e.preventDefault();
wrapperThis.processQueue();
});
},
accept: function (file, done) {
done();
}
};
</script>
}