我在将formData发布到服务器端操作方法时遇到一些问题。因为ajax调用不会将文件发送到服务器,所以我必须手动将文件上传器数据添加到formData,如下所示:
var formData=new formData();
formData.append(“imageFile”,$(“#imageFile”).file);
formData.append(“coverFile”,$(“#coverFile”).file);
我编写了jQuery函数,需要使用ajax调用将表单数据发布到服务器。
它可以工作,但在服务器端发布的formData总是空的
这是我的剧本:
<;脚本>;
函数submitButtonConClick()
{
var formData=new formData();
formData.append(“imageFile”,$(“#imageFile”).file);
formData.append(“coverFile”,$(“#coverFile”).file);
$.ajax({
类型:“POST”,
url:'@url.Action(“EditProfile”,“Profile”)',
数据:formData,
数据类型:“json”,
contentType:“多部分/表单数据”,
processData:false,
成功:功能(响应){
$('#GeneralSection').html(response.responseText);
},
错误:函数(错误){
$('#GeneralSection').html(error.responseText);
}
});
}
</脚本>;
编辑1:
这是控制器中的操作方法:
公共行动结果编辑概要文件,
HttpPostedFileBase图像文件,
HttpPostedFileBase封面文件,
字符串所有者(用户)
{
尝试
{
if(postOwnerUser==User.Identity.Name)
{
//编辑代码。。。
var结果=GetProfileGeneralDescription(postOwnerUser);
返回PartialView(“\u GeneralProfile”,结果);
}
其他的
{
var错误=新的HandleErrorInfo(
新异常(“访问被拒绝!”),
“个人资料”,
编辑档案
返回PartialView(“~/Views/Shared/Error.cshtml”,Error);
}
}
捕获(例外情况除外)
{
var错误=新的HandleErrorInfo(例如,“配置文件”,编辑配置文件
返回PartialView(“~/Views/Shared/Error.cshtml”,Error);
}
}
编辑2:
Cshtml查看文件内容:
@model.Website.Models.ViewModel.Profile
@使用(Ajax.BeginForm(“EditProfile”,“Profile”,new{postOwnerUser=User.Identity.Name},new AjaxOptions()
{
HttpMethod=“POST”,
InsertionMode=InsertionMode.Replace,
UpdateTargetId=“GeneralSection”
},新的{enctype=“multipart/form data”})
{
<;div>;
<;button id=“btnSubmit”type=“button”onclick=“SubmitButtonOnclick()”提交<;/button>;
<;/div>;
<;input type=“hidden”name=“username”id=“username”value=“@Model.username”/>;
<;字段集>;
<;图例>;编辑照片<;/图例>;
<;div>;
选择个人资料图片:
<;input id=“imageFile”type=“file”name=“imageFile”accept=“image/png,image/jpeg”/>;
@Html.CheckBoxFor(modelItem=>;modelItem.DefaultCover)<;span>;删除个人资料照片<;/span>;
<;/div>;
<;div>;
选择封面图片:
<;input id=“coverFile”type=“file”name=“coverFile”accept=“image/png,image/jpeg”/>;
@Html.CheckBoxFor(modelItem=>;modelItem.DefaultCover)<;span>;RemoveCover<;/span>;
<;/div>;
<;/fieldset>;
}
任何提示、链接或代码示例都很有用。
提前谢谢你
您可以使用jqueryajax代替jqueryajax
<;脚本>;
函数submitButtonConClick()
{
var formData=new formData();
var imagefile=document.getElementById(“imagefile”).files[0];
var coverfile=document.getElementById(“coverfile”).files[0];
formData.append(“imageFile”,imageFile);
formData.append(“封面文件”,封面文件);
var xhr=new XMLHttpRequest();
xhr.open(“POST”,“/Profile/EditProfile”,true);
addEventListener(“加载”,函数(evt){UploadComplete(evt);},false);
addEventListener(“错误”,函数(evt){UploadFailed(evt);},false);
xhr.send(formData);
}
功能上传完成(evt){
如果(evt.target.status==200)
警报(“徽标已成功上载”);
其他的
警报(“上传文件时出错”);
}
函数上载失败(evt){
警报(“尝试上载文件时出错。”);
}
<;/script>;
这对我有用
更改您的脚本
函数SubmitButtonOnclick(){
var formData=new formData();
var file=document.getElementById(“imageFile”).files[0];
var file1=document.getElementById(“coverFile”).files[0];
formData.append(“imageFile”,文件);
formData.append(“封面文件”,file1);
$.ajax({
类型:“POST”,
url:'@url.Action(“EditProfile”,“Default1”),
数据:formData,
数据类型:“json”,
contentType:false,
processData:false,
成功:功能(响应){
$('#GeneralSection').html(response.responseText);
},
错误:函数(错误){
$('#GeneralSection').html(error.responseText);
}
});
}