/*******************************************************************************
* 异步上传文件,兼容IE8，火狐和谷歌可用,如果可以使用h5则使用h5
* 实现单个多次上传不刷新
* @author 柳伟伟 <[email protected]>
* @version 1.5 (2016-05-09) 加入h5上传文件
*******************************************************************************/
(function ($) {
var frameCount = 0;
var formName = "";
var iframeObj = null;
var state = {};
//var fileHtml = "";
var colfile = null;
//清空值
function clean(target) {
var file = $(target);
var col = file.clone(true).val("");
file.after(col);
file.remove();
//关键说明
//先得到当前的对象和参数，接着进行克隆（同时克隆事件）
//将克隆好的副本放在原先的之后，按照顺序逐个删除，最后初始化克隆的副本
};
function h5Submit(target) {
var options = state.options;
var fileObj = target[0].files[0];
var fd = new FormData();//h5对象
//附加参数
for (key in options.params) {
fd.append(key, options.params[key])
}
var fileName = target.attr(‘name‘);
if (fileName == ‘‘
|| fileName == undefined) {
fileName = ‘file‘;
}
fd.append(fileName, fileObj);
//异步上传
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
console.log(percentComplete + "%");
if (options.onProgress) {
options.onProgress(evt);
}
}
}, false);
xhr.addEventListener("load", function (evt) {
if (‘json‘ == options.dataType) {
var d = window.eval(‘(‘ + evt.target.responseText + ‘)‘);
options.onComplate(d);
} else {
options.onComplate(evt.target.responseText);
}
}, false);
xhr.addEventListener("error", function () {
console.log("error");
}, false);
xhr.open("POST", options.url);
xhr.send(fd);
}
function ajaxSubmit(target) {
var options = state.options;
if (options.url == ‘‘ || options.url == null) {
alert("无上传地址");
return;
}
if ($(target).val() == ‘‘ || $(target).val() == null) {
alert("请选择文件");
return;
}
var canSend = options.onSend($(target), $(target).val());
if (!canSend) {
return;
}
/*判断是否可以用h5*/
if (window.FormData) {
//h5
console.log(‘h5Submit‘);
h5Submit(target);
} else {
/**/
if (iframeObj == null) {
var frameName = ‘upload_frame_‘ + (frameCount++);
var iframe = $(‘<iframe style="position:absolute;top:-9999px" ><script type="text/javascript"></script></iframe>‘).attr(‘name‘, frameName);
formName = ‘form_‘ + frameName;
var form = $(‘<form method="post" style="display:none;" enctype="multipart/form-data" />‘).attr(‘name‘, formName);
form.attr("target", frameName).attr(‘action‘, options.url);
//
var fileHtml = $(target).prop("outerHTML");
colfile = $(target).clone(true);
$(target).replaceWith(colfile);
var formHtml = "";
// form中增加数据域
for (key in options.params) {
formHtml += ‘<input type="hidden" name="‘ + key + ‘" value="‘ + options.params[key] + ‘">‘;
}
form.append(formHtml);
form.append(target);
iframe.appendTo("body");
form.appendTo("body");
iframeObj = iframe;
}
//禁用
$(colfile).attr("disabled", "disabled");
var form = $("form[name=" + formName + "]");
//加载事件
iframeObj.bind("load", function (e) {
var contents = $(this).contents().get(0);
var data = $(contents).find(‘body‘).text();
if (‘json‘ == options.dataType) {
try {
data = window.eval(‘(‘ + data + ‘)‘);
}
catch (Eobject) {
console.log(‘返回的json数据错误‘);
console.log(Eobject);
data = null;
}
}
options.onComplate(data);
iframeObj.remove();
form.remove();
iframeObj = null;
//启用
$(colfile).removeAttr("disabled");
});
try {
form.submit();
} catch (Eobject) {
console.log(Eobject);
}
}
};
//构造
$.fn.upload = function (options) {
if (typeof options == "string") {
return $.fn.upload.methods[options](this);
}
options = options || {};
state = $.data(this, "upload");
if (state)
$.extend(state.options, options);
else {
state = $.data(this, "upload", {
options: $.extend({}, $.fn.upload.defaults, options)
});
}
};
//方法
$.fn.upload.methods = {
clean: function (jq) {
return jq.each(function () {
clean(jq);
});
},
ajaxSubmit: function (jq) {
return jq.each(function () {
ajaxSubmit(jq);
});
},
getFileVal: function (jq) {
return jq.val()
}
};
//默认项
$.fn.upload.defaults = $.extend({}, {
url: ‘‘,
dataType: ‘json‘,
params: {},
onSend: function (obj, str) { return true; },
onComplate: function (e) {},
onProgress: function (e) {}
});
})(jQuery);
调用下面的方法 function ajaxSubmit1() {
$("#change_file").upload({
url: ‘../upload/uploadImage.do‘,
// 其他表单数据
params: { name: ‘pxblog‘ },
// 上传完成后, 返回json, text
dataType: ‘json‘,
onSend: function (obj, str) { return true; },
// 上传之后回调
onComplate: function (data) {
$("#show_img").attr("src",data.url);
$("#imagePathOne").val(data.url);
}
});
$("#change_file").upload("ajaxSubmit");
}
/******************************************************************************** 异步上传文件,兼容IE8，火狐和谷歌可用,如果可以使用h5则使用h5* 实现单个多次上传不刷新* @author 柳伟伟 <[email protected]>* @version 1.5 (2016-05-09) 加入h5上传文件*******************************************************************************/(function ($) { var frameCount = 0; var formName = ""; var iframeObj = null; var state = {}; //var fileHtml = ""; var colfile = null; //清空值 function clean(target) { var file = $(target); var col = file.clone(true).val(""); file.after(col); file.remove(); //关键说明 //先得到当前的对象和参数，接着进行克隆（同时克隆事件） //将克隆好的副本放在原先的之后，按照顺序逐个删除，最后初始化克隆的副本 }; function h5Submit(target) { var options = state.options; var fileObj = target[0].files[0];
var fd = new FormData();//h5对象 //附加参数 for (key in options.params) { fd.append(key, options.params[key]) } var fileName = target.attr(‘name‘); if (fileName == ‘‘ || fileName == undefined) { fileName = ‘file‘; } fd.append(fileName, fileObj); //异步上传 var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = Math.round(evt.loaded * 100 / evt.total); console.log(percentComplete + "%"); if (options.onProgress) { options.onProgress(evt); } } }, false); xhr.addEventListener("load", function (evt) { if (‘json‘ == options.dataType) { var d = window.eval(‘(‘ + evt.target.responseText + ‘)‘); options.onComplate(d); } else { options.onComplate(evt.target.responseText); } }, false); xhr.addEventListener("error", function () { console.log("error"); }, false); xhr.open("POST", options.url); xhr.send(fd); } function ajaxSubmit(target) { var options = state.options; if (options.url == ‘‘ || options.url == null) { alert("无上传地址"); return; } if ($(target).val() == ‘‘ || $(target).val() == null) { alert("请选择文件"); return; } var canSend = options.onSend($(target), $(target).val()); if (!canSend) { return; } /*判断是否可以用h5*/ if (window.FormData) { //h5 console.log(‘h5Submit‘); h5Submit(target); } else { /**/ if (iframeObj == null) { var frameName = ‘upload_frame_‘ + (frameCount++); var iframe = $(‘<iframe style="position:absolute;top:-9999px" ><script type="text/javascript"></script></iframe>‘).attr(‘name‘, frameName); formName = ‘form_‘ + frameName; var form = $(‘<form method="post" style="display:none;" enctype="multipart/form-data" />‘).attr(‘name‘, formName); form.attr("target", frameName).attr(‘action‘, options.url); // var fileHtml = $(target).prop("outerHTML"); colfile = $(target).clone(true); $(target).replaceWith(colfile); var formHtml = ""; // form中增加数据域 for (key in options.params) { formHtml += ‘<input type="hidden" name="‘ + key + ‘" value="‘ + options.params[key] + ‘">‘; } form.append(formHtml); form.append(target); iframe.appendTo("body"); form.appendTo("body"); iframeObj = iframe; } //禁用 $(colfile).attr("disabled", "disabled"); var form = $("form[name=" + formName + "]"); //加载事件 iframeObj.bind("load", function (e) { var contents = $(this).contents().get(0); var data = $(contents).find(‘body‘).text(); if (‘json‘ == options.dataType) { try { data = window.eval(‘(‘ + data + ‘)‘); } catch (Eobject) { console.log(‘返回的json数据错误‘); console.log(Eobject); data = null; } } options.onComplate(data); iframeObj.remove(); form.remove(); iframeObj = null; //启用 $(colfile).removeAttr("disabled"); }); try { form.submit(); } catch (Eobject) { console.log(Eobject); } } }; //构造 $.fn.upload = function (options) { if (typeof options == "string") { return $.fn.upload.methods[options](this); } options = options || {}; state = $.data(this, "upload"); if (state) $.extend(state.options, options); else { state = $.data(this, "upload", { options: $.extend({}, $.fn.upload.defaults, options) }); } }; //方法 $.fn.upload.methods = { clean: function (jq) { return jq.each(function () { clean(jq); }); }, ajaxSubmit: function (jq) { return jq.each(function () { ajaxSubmit(jq); }); }, getFileVal: function (jq) { return jq.val() } }; //默认项 $.fn.upload.defaults = $.extend({}, { url: ‘‘, dataType: ‘json‘, params: {}, onSend: function (obj, str) { return true; }, onComplate: function (e) {}, onProgress: function (e) {} });})(jQuery);