我开发了一个带有 asp.net core 2.1 razor 页面的网站,用户可以在其中将多个媒体文件拖放到网站上,或者通过单击按钮将文件上传到服务器来选择文件。然后文件在页面上显示名称和其他属性。每个文件都有一个删除按钮来删除上传。
选择或删除所有文件后,用户按下提交按钮,所有文件将连同几个表单域一起提交到服务器。
现在的问题是,没有文件发送到服务器。用大拇指在网站上显示是正确的,但提交后 HttpContext.Request.Form.Files 为空。
添加选项'''replaceFileInput: false'''后,按钮添加的文件正确提交。
如果用户拖放文件,则文件不会添加到输入对象中。提交后,此文件未提交到服务器。
该网站的演示托管在 github 上: https ://github.com/IsibisiCoder/Asp.Net-Core-with-blueimp-jQuery-File-Upload
索引.cshtml:
<form id="fileupload" method="POST" data-url="Index" enctype="multipart/form-data">
<span class="btn btn-primary fileinput-button upload-button">
<span>add files...</span>
<input type="file" name="files" multiple>
</span>
<span class="fileupload-process"></span>
<!-- The table listing the files available for upload/download -->
<div id="upload-table-hide">
<div id="upload-table table-wrapper">
<div id="table-scroll">
<table role="presentation" class="table table-striped"><tbody id="uploadedfiles" class="files"></tbody></table>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-6">
<input asp-for="Value1" class="form-control" placeholder="Parameter Formdata 1" />
<span asp-validation-for="Value1" class="text-danger"></span>
</div>
<div class="form-group col-sm-6">
<input asp-for="Value2" class="form-control" placeholder="Parameter Formdata 2" />
<span asp-validation-for="Value2" class="text-danger"></span>
</div>
</div>
<div class="form-row">
<div class="col-sm-auto">
<button id="upload-button" type="submit" class="btn btn-primary upload-button start">
<span>upload</span>
</button>
</div>
</div>
</form>
@section Scripts{
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade show">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
</td>
<td>
{% if (!i) { %}
<button class="btn btn-warning upload-button cancel">
<span>Löschen</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade show">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">
<span>{%=file.name%}</span>
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
<p>✅</p>
</td>
</tr>
{% } %}
</script>
<script type="text/javascript">
$(function (e, data) {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
previewMaxWidth: 100000,
autoUpload: false,
replaceFileInput: false,
dataType: 'json',
singleFileUploads: false,
multipart: true,
limitMultiFileUploadSize: 10000,
paramName: 'files'
});
});
</script>
}
index.cshtml.cs
public class IndexModel : PageModel
{
[BindProperty]
public string Value1 { get; set; }
[BindProperty]
public string Value2 { get; set; }
public void OnGet()
{
}
[HttpPost]
public IActionResult OnPost(List<IFormFile> files)
{
// with parameter or httpcontext or both
var files2 = HttpContext.Request.Form.Files;
return Page();
}
}
我在https://github.com/ronnieoverby/blue-imp-upload-aspnet-mvc上找到了一个带有 asp.net mvc 的项目,它工作正常,request.files 已填满。但是对于 asp.net 核心,源代码不起作用。
(更新)我已经更改了描述并在 github 上添加了一个演示。
(更新)我已经解决了这个问题。请参阅我今天的单独帖子。