直接上代码了 有不理解的可以评论区@我 一起讨论。
/*
2017/04/17-zhaoyf-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie11
依赖:jquery.js
主方法:ajaxFileUpload 接受 json 对象参数
参数说明:
fileElementId:必选,上传文件域ID
url:必选,发送请求的URL字符串
fileFilter:可选,限定上传文件的格式,包括格式字符串即可
fileSize:可选,0 为无限制,字符显示只是个人爱好,可以自由设定
data:可选,将和文件域一同post的参数(json对象)
其它:$.ajax 的参数均为可选参数
注:如遇到‘无法访问’的脚本错误提示则需要在响应流中加一段脚块一同输出:<script ...>document.domain = 'xxx.com';</script>
*/
/**
* 异步上传文件
* @param url 提交路径
* @param fileId 准备提交的文件input框
* @param imgId 准备显示上传图片的img标签
* @param data 准备和图片一起提交的数据
* 注册时设置为null,修改时用值对指定字段修改
* imgUrl : 全局变量
* @returns {boolean}
*/
/*function uploadImg(url,fileId, imgId ,data) {
$.ajaxFileUpload({
url: url,
fileElementId: fileId,
dataType: 'json',
fileFilter:'jpgpng',
data: data,
beforeSend: function (XMLHttpRequest) {
//("加载前");
},
success:function (result) {
if(result.state){
alert("用户头像路径:"+result.imgUrl);
//$("#"+imgId).attr("src",result.imgUrl);
imgUrl = result.imgUrl;
}else{
alert(result.message);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("图片上传失败!");
},
complete: function (XMLHttpRequest, textStatus) {
//("加载后");
}
});
}*/
jQuery.extend({
//创建 iframe 元素,接受提交及响应
createUploadIframe: function(id, uri) {
//create frame
var frameId = 'jUploadFrame' + id;
if (window.ActiveXObject) {
//fix ie9 and ie 10-------------
if (jQuery.browser.version == "9.0" || jQuery.browser.version == "10.0") {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
} else if (jQuery.browser.version == "6.0" || jQuery.browser.version == "7.0" || jQuery.browser.version == "8.0") {
var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');