Asp.net core 无法传递上载模式中的文件
我有一个引导模式弹出窗口,我想用来选择和上传文件。该弹出窗口在所有方面都有效,但它不会将所选文件传递给基础控制器。表格如下:Asp.net core 无法传递上载模式中的文件,asp.net-core,file-upload,bootstrap-modal,Asp.net Core,File Upload,Bootstrap Modal,我有一个引导模式弹出窗口,我想用来选择和上传文件。该弹出窗口在所有方面都有效,但它不会将所选文件传递给基础控制器。表格如下: <!--Modal Body Start--> <div class="modal-content"> <!--Modal Header Start--> <div class="modal-header"> <h4 class="modal-title&qu
<!--Modal Body Start-->
<div class="modal-content">
<!--Modal Header Start-->
<div class="modal-header">
<h4 class="modal-title">Upload File</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!--Modal Header End-->
<form asp-action="FileUpload" asp-controller="Attachment" method="post" enctype="multipart/form-data">
@Html.AntiForgeryToken()
<div class="modal-body form-horizontal">
<div>
<p>Upload a file using this form:</p>
<input type="file" name="file" />
</div>
<!--Modal Footer Start-->
<div class="modal-footer">
<button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Cancel</button>
<input type="submit" class="btn btn-success relative" id="btnSubmit" data-save="modal" value="Upload">
</div>
<div class="row">
</div>
</div> <!--Modal Footer End-->
</form>
</div>
<script type="text/javascript">
$(function () {
});
</script>
<!--Modal Body End-->
调用该操作,但“file”变量为NULL
我在弹出窗口的主页上有以下标记和脚本:
<div id="modal-container" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
<a href="@Url.Action("UploadFile", new { controller = "Attachment", issueid = Model.IssueData.issueId })" class="modal-link btn btn-success">Upload Files</a>
<script>
$('body').on('click', '.modal-link', function () {
var actionUrl = $(this).attr('href');
$.get(actionUrl).done(function (data) {
$('body').find('.modal-content').html(data);
});
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = form.serialize();
$.post(actionUrl, dataToSend).done(function (data) {
$('body').find('.modal-content').html(data);
});
})
$('body').on('click', '.close', function () {
$('body').find('#modal-container').modal('hide');
});
$('#CancelModal').on('click', function () {
return false;
});
$("form").submit(function () {
if ($('form').valid()) {
$("input").removeAttr("disabled");
}
});
</script>
$('body')。在('click','modal link',函数(){
var actionUrl=$(this.attr('href');
$.get(actionUrl).done(函数(数据){
$('body').find('modal content').html(数据);
});
$(this.attr('data-target','#modal container');
$(this.attr('data-toggle','modal');
});
$('body')。关于('click','relative',函数(e){
e、 预防默认值();
var form=$(this).parents('.modal').find('form');
var actionUrl=form.attr('action');
var dataToSend=form.serialize();
$.post(actionUrl,dataToSend).done(函数(数据){
$('body').find('modal content').html(数据);
});
})
$('body')。在('click','close',函数()上{
$('body').find('modal container').modal('hide');
});
$('#cancelmodel')。在('click',函数(){
返回false;
});
$(“表格”)。提交(函数(){
if($('form').valid(){
$(“输入”).removeAttr(“禁用”);
}
});
要使用文件上载表单数据,必须使用对象。此外,还必须使用$.ajax,因为$.pass无法处理FormData对象
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = new FormData(form[0]);
$.ajax({
url: actionUrl,
type: 'POST',
data: dataToSend,
processData: false, //prevent jQuery from trying to serialize the FormData object
contentType: false, // prevents jQuery from setting the default content type
success: function(data){
$('body').find('.modal-content').html(data);
}
});
})
将('click','relative')上的$('body')。函数(e)替换为您使用的函数(e)会破坏一些现有代码。当我添加$.ajax而不是$.post时,会阻止在同一页面上的另一个模式弹出窗口上进行验证。另外,formdata对象与之有何不同?在Core中,这是我用来将数据传递回控制器的功能。
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = new FormData(form[0]);
$.ajax({
url: actionUrl,
type: 'POST',
data: dataToSend,
processData: false, //prevent jQuery from trying to serialize the FormData object
contentType: false, // prevents jQuery from setting the default content type
success: function(data){
$('body').find('.modal-content').html(data);
}
});
})