jQuery：ajaxfileupload.js多文件上传-传值-跨域

来源：互联网发布：行知天下参考答案2017 编辑：程序博客网时间：2024/04/28 11:35

在使用jQuery的ajaxfileupload.js插件来处理ajax上传图片功能，但内置的功能有3个问题

不能同时上传多个文件
不能传递参数
主域下的跨域提交问题
以及一个jQuery版本问题handleError

下面说下对于个个问题的处理方式，并在最后放上完整的代码，可以直接复制

同时上传多个文件

1var oldElement = jQuery('#' + fileElementId);
2var newElement = jQuery(oldElement).clone();
3jQuery(oldElement).attr('id', fileId);
4jQuery(oldElement).before(newElement);
5jQuery(oldElement).appendTo(form);

修改为：

01if(typeof(fileElementId) =='string'){
02fileElementId = [fileElementId];
03}
04for(var iin fileElementId){
05var oldElement = jQuery('#' + fileElementId[i]);
06var newElement = jQuery(oldElement).clone();
07jQuery(oldElement).attr('id', fileId);
08jQuery(oldElement).before(newElement);
09jQuery(oldElement).appendTo(form);
10}

使用：

1$.ajaxFileUpload({
2    url:'/ajax.php',
3    fileElementId:['img1','img2']//原先是fileElementId:’img1’,通过传递数组实现多文件上传
4});

传递多个参数

var form = jQuery.createUploadForm(id, s.fileElementId);
修改为：
var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));

createUploadForm: function(id, fileElementId)
修改为：
createUploadForm: function(id, fileElementId, data)
并在//single前添加

1if(data) {
2for(var iin data) {
3jQuery('<input type="hidden" name="' + i +'" value="' + data[i] +'" />').appendTo(form);
4}        
5}

使用：

1$.ajaxFileUpload({
2    url:'/ajax.php',
3    fileElementId:['img1','img2'],
4    data:{ }//传递对象结构{name:name1}
5});

跨域

这个不是插件本身的问题，我的解决方法也只适用于同一主域名

在url的请求返回中添加<script>document.domain = "xxxx.com";</script>
因为请求是通过读取返回页面的文档内容，在这时候实际返回页面是会执行js脚本的，并且该脚本不会进入后续的文档加载中
所以只需将修改文档域与当前页面一致就行
在调用页面添加：document.domain = "xxxx.com";
不修改插件本身

handleError

jquery在1.4以后不支持handleError

所以需要自行添加

01,
02handleError:function( s, xhr, status, e ) { 
03// If a local callback was specified, fire it 
04if ( s.error ) { 
05s.error.call( s.context || s, xhr, status, e ); 
06} 
07// Fire the global callback 
08if ( s.global ) { 
09 (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e] ); 
10} 
11}

完整的代码

view source
001jQuery.extend({
002    createUploadIframe:function(id, uri){
003        //create frame
004        var frameId ='jUploadFrame' + id;
005        var iframeHtml ='<iframe id="' + frameId +'" name="' + frameId +'" style="position:absolute; top:-9999px; left:-9999px"';
006        if(window.ActiveXObject){
007            if(jQuery.browser.version=="9.0" || jQuery.browser.version=="10.0"){
008                var io = document.createElement('iframe');
009                io.id = frameId;
010                io.name = frameId;
011            }else if(jQuery.browser.version=="6.0" || jQuery.browser.version=="7.0" || jQuery.browser.version=="8.0"){
012                var io = document.createElement('<iframe id="' + frameId +'" name="' + frameId +'" />');
013                if(typeof uri=='boolean'){
014                    io.src ='javascript:false';
015                }else if(typeof uri=='string'){
016                    io.src = uri; 
017                } 
018            }
019        }
020        iframeHtml +=' />';
021        jQuery(iframeHtml).appendTo(document.body);
022        return jQuery('#' + frameId).get(0);
023    },
024    createUploadForm:function(id, fileElementId, data){
025        //create form
026        var formId ='jUploadForm' + id;
027        var fileId ='jUploadFile' + id;
028        var form = jQuery('<form  action="" method="POST" name="' + formId +'" id="' + formId +'" enctype="multipart/form-data"></form>');
029        if(data){
030            for(var iin data){
031                jQuery('<input type="hidden" name="' + i +'" value="' + data[i] +'" />').appendTo(form);
032            }
033        }
034        //single
035        if(typeof(fileElementId) =='string'){
036            fileElementId = [fileElementId];
037        }
038        for(var iin fileElementId){
039            var oldElement = jQuery('#' + fileElementId[i]);
040            var newElement = jQuery(oldElement).clone();
041            jQuery(oldElement).attr('id', fileId);
042            jQuery(oldElement).before(newElement);
043            jQuery(oldElement).appendTo(form);
044        }
045        //set attributes
046        jQuery(form).css('position','absolute');
047        jQuery(form).css('top','-1200px');
048        jQuery(form).css('left','-1200px');
049        jQuery(form).appendTo('body');
050        return form;
051    },
052    ajaxFileUpload:function(s) {
053        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
054        s = jQuery.extend({}, jQuery.ajaxSettings, s);
055        var id =new Date().getTime()      
056        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
057        var io = jQuery.createUploadIframe(id, s.secureuri);
058        var frameId ='jUploadFrame' + id;
059        var formId ='jUploadForm' + id;     
060        // Watch for a new set of requests
061        if ( s.global && ! jQuery.active++ ){
062            jQuery.event.trigger("ajaxStart" );
063        }
064        var requestDone =false;
065        // Create the request object
066        var xml = {};
067        if ( s.global )
068            jQuery.event.trigger("ajaxSend", [xml, s]);
069        // Wait for a response to come back
070        var uploadCallback =function(isTimeout){
071            var io = document.getElementById(frameId);
072            var execontent =function(){
073                try
074                { 
075                    if(io.contentWindow)
076                    {
077                        xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
078                        xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
079 
080                    }else if(io.contentDocument)
081                    {
082                        xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
083                        xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
084                    }
085                }catch(e)
086                {
087                  jQuery.handleError(s, xml,null, e);
088                }
089                if ( xml || isTimeout =="timeout"){
090                    requestDone =true;
091                    var status;
092                    try {
093                        status = isTimeout !="timeout" ?"success" :"error";
094                        // Make sure that the request was successful or notmodified
095                        if ( status !="error" )
096                        {
097                            // process the data (runs the xml through httpData regardless of callback)
098                            var data = jQuery.uploadHttpData( xml, s.dataType );  
099                            // If a local callback was specified, fire it and pass it the data
100                            if ( s.success )
101                                s.success( data, status );
102                            // Fire the global callback
103                            if( s.global )
104                                jQuery.event.trigger("ajaxSuccess", [xml, s] );
105                        }else
106                            jQuery.handleError(s, xml, status);
107                    }catch(e)
108                    {
109                        status ="error";
110                        jQuery.handleError(s, xml, status, e);
111                    }
112                    // The request was completed
113                    if( s.global )
114                        jQuery.event.trigger("ajaxComplete", [xml, s] );
115                    // Handle the global AJAX counter
116                    if ( s.global && ! --jQuery.active )
117                        jQuery.event.trigger("ajaxStop" );
118                    // Process result
119                    if ( s.complete )
120                        s.complete(xml, status);
121                    jQuery(io).unbind();
122                    setTimeout(function(){
123                        try{
124                            jQuery(io).remove();
125                            jQuery(form).remove(); 
126                        }catch(e){
127                            jQuery.handleError(s, xml,null, e);
128                        }
129                    }, 100);
130                    xml =null;
131                }
132            };
133            execontent();
134        }
135        // Timeout checker
136        if ( s.timeout > 0 ){
137            setTimeout(function(){
138                // Check to see if the request is still happening
139                if( !requestDone ) uploadCallback("timeout" );
140            }, s.timeout);
141        }
142        try{
143            var form = jQuery('#' + formId);
144            jQuery(form).attr('action', s.url);
145            jQuery(form).attr('method','POST');
146            jQuery(form).attr('target', frameId);
147            if(form.encoding)
148            {
149                jQuery(form).attr('encoding','multipart/form-data');
150            }else{
151                jQuery(form).attr('enctype','multipart/form-data');
152            }
153            jQuery(form).submit();
154        }catch(e){
155            jQuery.handleError(s, xml,null, e);
156        }
157        jQuery('#' + frameId).load(uploadCallback );
158        return {abort:function () {}};
159    },
160    uploadHttpData:function( r, type ) {
161        var data = !type;
162        data = type =="xml" || data ? r.responseXML : r.responseText;
163        // If the type is "script", eval it in global context
164        if ( type =="script" )
165            jQuery.globalEval( data );
166        // Get the JavaScript object, if JSON is used.
167        if ( type =="json" )
168            eval("data = " + data );
169        // evaluate scripts within html
170        if ( type =="html" )
171            jQuery("<div>").html(data).evalScripts();
172        return data;
173    },
174    handleError:function( s, xhr, status, e ){
175    // If a local callback was specified, fire it 
176        if ( s.error ) {
177            s.error.call( s.context || s, xhr, status, e );
178        }
179        // Fire the global callback 
180        if ( s.global ) { 
181            (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e] );
182        }
183    }
184})

原文链接 jquery判断上传图片的类型大小

0 0