问题:例如用户注册的时候,我们想通过异步上传图片或者文字等信息,图片需要额外的发送,这样就需要用到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.前台:
<input id="file_upload" type="file" name="file_upload" οnchange="document.getElementById('txt_PhotoUrl').value = this.value" class="hidden"/>
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.后台代码:(测试用的,没有写具体的文件名重复判断)
/// <summary>
/// 文件上传
/// </summary>
/// <returns></returns>
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("<div>").html(data).evalScripts();
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