ASP.NET MVC+ajaxfileupload实现图片异步上传
问题：例如用户注册的时候，我们想通过异步上传图片或者文字等信息，图片需要额外的发送，这样就需要用到ajaxfileupload.js插件了
说明:只附载主要代码
使用之前附载Jqury和ajaxfileupload源码（Jqury版本好像没有多大要求，版主为jquery-3.3.1.js）
关于源码问题：ajaxfileupload如果是在ASP.NET 上运行 强烈建议用版主推荐的（版主之前入了别人的坑，找了一晚上没找到错，没有执行success和erro）
http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar
感谢逆心博主:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html（如果我写的不好可以借鉴）
1.前台：
2.Js代码:
$.ajaxFileUpload({
url: '/Users/UpLoadFile', //用于文件上传的服务器端请求地址secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'file_upload', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
if (status == "success") {
//文件上传成功
//修改文件位置
postdata.Photo = data.urlPath;
//文件上传成功后上传其他数据如用户名，密码等数据
$.ajax({
type: "post",
url: "/Users/" + sendName,
data: postdata,
dataType: "json",
success: function (data, status) {
if (status == "success") {
alert("文件上传成功！");
}
},
error: function () {
alert("出错了！");
},
complete: function () {
alert("一次处理完成！");
}
});
}
},
error: function ()//服务器响应失败处理函数
{
alert("文件上传失败,请检查后重试");
}
});
}
3.后台代码：(测试用的,没有写具体的文件名重复判断)
///
/// 文件上传
///
///
public JsonResult UpLoadFile()
{
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
string filePath = files[0].FileName;
string filename = filePath.Substring(filePath.LastIndexOf("\\") + 1);
//存到服务器的地址
string serverpath = Server.MapPath(@"\Image\Users\") + filename;
//取出图片的位置
string relativepath = @"/Image/Users/" + filename;
//保存图片
files[0].SaveAs(serverpath);
filePath = files[0].FileName;
//返回图片的相对位置 relativepath
return Json(new { urlPath = relativepath }, JsonRequestBehavior.AllowGet);
}
4.效果展示:
1.点击添加图片
2.提交的数据
3.后台读取图片上传成功：
5.之前遇到的问题（博主之前遇到不执行success和erro）
1.解决方法
uploadHttpData: function (r, type) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if (type == "script")
jQuery.globalEval(data);
// Get the JavaScript object, if JSON is used.
if (type == "json")
data = jQuery.parseJSON(jQuery(data).text());
//eval("data = \"" + data + "\"");
// evaluate scripts within html
if (type == "html")
jQuery("
return data;
},
方法中 eval("data = \"" + data + "\""); 改为data = jQuery.parseJSON(jQuery(data).text());
if (type == "json")
data = jQuery.parseJSON(jQuery(data).text());
//eval("data = \"" + data + "\"");
但是我测试了没用(害的我找了一晚上没找出来)，建议用博主推荐的源码地址
http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar