一:问题描述
含有文件信息表单内容,想通过异步上传到服务器,但是使用Ajax.BeginForm上传时,后台无法获取文件信息
二:解决方案
通过 $.ajaxFileUpload 可以实现文件及文本内容上传到服务器的需求, 但是需要引入ajaxfileupload.js文件
三:注意事项
(1):
//表单文本内容,
var data = { RealName: RealName1, Telephone: Telephone1, FlightNumber: FlightNumber1, FlightDate: FlightDate1, ComplaintContent: ComplaintContent1 };
$.ajaxFileUpload({
method: "POST",
url: "/controller/action",//需要链接到服务器地址
secureuri: true,
fileElementId: 'id_ComplaintsPicture',//文件选择框的id属性(也就是type="file"的input的id属性,并不需要把文件值写入到data中)
data: data,//$("#form_2").serialize(),//此写法,只上传文件还可以,文件加文本内容上传无效
success: function (data) {
//上传成功之后的操作
var obj = $.parseJSON(data);//返回值形式需要在 ajaxFileUpload.js文件中修改一下,因为它对你原生的后台返回值进行了修饰,这里我的后台返回值形式为{"result": "0","msg": "返回内容"}
if (obj.result == "0") {
if (obj.msg) {
alert(obj.msg);
} else {
alert("失败!");
}
$("#sub_btn").attr("disabled", false);//id为提交按钮(type="button")
} else {
alert("成功!");
window.location.reload();
}
}, error: function (ret) {
//上传失败之后的操作
alert("网络错误!请重试!");
}
});
(2) ajaxFileUpload.js 文件修改 位置
uploadHttpData 函数的最后返回值修改成 return r.responseText;
(3 ajaxFileUpload.js 文件的 handleError 可能因为你引用的jquery版本的问题而报错“函数不存在"
解决方法:
在ajaxFileUpload.js 文件中加入以下代码
handleError: function (s, xhr, status, e) {
// If a local callback was specified, fire it
if (s.error) {
s.error.call(s.context || s, xhr, status, e);
} // Fire the global callback
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
}
}
四 后台接收方式 .net
public string complaint(HttpPostedFileBase[] ComplaintsPicture)
这里就不介绍如何接收上传的文本框内容了,注意ComplaintsPicture就是type="file"的input ,它的name名称,上面代码表示可以接收多个文件