|
ajaxfileUpload.js兼容ie7、8、9、10、11、firefox、chrome等浏览器的js代码
因为项目需要，引入了ajaxfileUpload.js的js插件，从开始用 ，就一直问题多多，我当时是结合springmvc使用的。
如1、使用springmvc的@responseBody返回，不可以，需要改成response.getWrite().write()方法。解决ie下返回的是json文件的问题。
如2、返回的结果需要eval（）处理等。
如3、缺少错误函数的处理等。
如4、在同一页面上传多次，会出现遮罩层重叠，弹出框弹出多次的问题。【需要在代码中做一个计数器。】
如5、handleError方法写的不规范等问题，引起前台总报js错误。
等等，使用了这个js插件，有种被坑的感觉，一直在解决各种问题。
目前这个js插件已经解决以上所有问题，网上提供的这个插件都或多或少缺少一些功能。
自己痛苦了这么多，希望对使用此控件的人有用，减少一些查找和解决错误的时间。
附上代码：
// JavaScript Document
jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) //var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
(jQuery.browser.version=="9.0" || jQuery"10.0"){
var io = document.createElement('iframe');
io.id = frameId;
io.name ;
}else "6.0" "7.0" "8.0"'<iframe id="' + frameId + '" name="' '" />');
(typeof uri== 'boolean'){
io.src 'javascript:false';
}
'string'= uri}
else {
);
io;
io}
io.style.position 'absolute'.top '-1000px'.left ;
document.body.appendChild(io);
return io},
createUploadForm fileElementId data//create form
var formId 'jUploadForm' ;
var fileId 'jUploadFile' var form = jQuery'<form action="" method="POST" name="' + formId '" id="' '" enctype="multipart/form-data"></form>'var oldElement '#' + fileElementId);
var newElement (oldElement).clone();
jQuery).attr'id' fileId);
jQuery).before(newElement).appendTo(form);
//add data
(data{
for var i in data{
$'<input type="hidden" name="' + i '" value="' + data[i] );
}
}
//set attributes
jQuery).css'position' 'top''-1200px''left''body'return form ajaxFileUpload(s// TODO introduce global settings,allowing the client to modify them for all requests,not only timeout
s ({}, jQuery.ajaxSettings svar id = s.id;
//var id = s.fileElementId;
.createUploadForm.fileElementIds.data.createUploadIframe.secureuri;
( s.global && ! jQuery.active++ ){
// Watch for a new set of requests
jQueryevent.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {};
){
jQuery"ajaxSend" [xml]);
}
var uploadCallback (isTimeout){
// Wait for a response to come back
.getElementById(frameIdtry.contentWindow){
xml.responseText = io.document?io.innerHTML:null;
xml.responseXML XMLDocument:io.contentDocumentcatch(e.handleError xml e( xml || isTimeout "timeout"){
requestDone truevar statustry {
status = isTimeout != "timeout" ? "success" : "error"// Make sure that the request was successful or notmodified
( status "error" // process the data (runs the xml through httpData regardless of callback)
var data .uploadHttpData( xml.dataType .success // ifa local callback was specified,fire it and pass it the data
s.success( data status };
// Fire the global callback
jQuery"ajaxSuccess"};
} else{
jQuery status}
){
status ;
jQuery// The request was completed
jQuery"ajaxComplete"};
// Handle the global AJAX counter
! --jQuery"ajaxStop"};
.complete){
s(xml};
jQuery).unbind();
setTimeout(){
).remove();
}}, 100);
xml };
// Timeout checker
.timeout > 0 ){
setTimeout(){(!requestDone ){uploadCallback);}},0)">.timeout+ formId'action'.url'method''POST''target' frameId.encoding){
form.encoding 'multipart/form-data'{
form.enctype }
jQuery).submit();
){
jQuery/*if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload',uploadCallback);
}
else{
document.getElementById(frameId).addEventListener('load',uploadCallback,false);
} */
jQuery+ frameId).load(uploadCallbackreturn {abortfunction () {}};
uploadHttpData( r type !type;
data = type "xml" || data ? r: r.responseText// ifthe type is "script",eval it in global context
( type "script" .globalEval( data }
// Get the JavaScript object,ifJSON is used.
"json" ){
data = r;
var start = data.indexOf">"(start != -1var end "<" start + {
data .substringendeval"data = " // evaluate scripts within html
"html" "<div>").html).evalScripts();
}
return data /*handleError: function( s,xml,status,e ) {
// If a local callback was specified,fire it
if ( s.error )
s.error( xml,e );
// Fire the global callback
if ( s.global )
jQuery.event.trigger( "ajaxError",[xml,s,e] );
}*/
handleError xhr e // If a local callback was specified,fire it
if .error {
s.error.call.context || s// Fire the global callback
{
? jQuery.context: jQuery).trigger"ajaxError"[xhr}
});
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
