ajax跨域上传图片
首页 > >    作者:lininn   2017年12月29日 9:20 星期五   热度:2429°   百度已收录  
时间:2017-12-29 9:20   热度:2429° 
jQuery.extend({  
    handleError: function( s, xhr, status, e ) {  
        // If a local callback was specified, fire it  
        if ( s.error )  
            s.error( xhr, status, e );  
        // If we have some XML response text (e.g. from an AJAX call) then log it in the console  
        else if(xhr.responseText)  
            console.log(xhr.responseText);  
    },  
    createUploadIframe: function(id, uri)  
    {  
        //create frame  
        var frameId = 'jUploadFrame' + id;  
        var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';  
        if(window.ActiveXObject)  
        {  
            if(typeof uri== 'boolean'){  
                iframeHtml += ' src="' + 'javascript:false' + '"';  
  
            }  
            else if(typeof uri== 'string'){  
                iframeHtml += ' src="' + uri + '"';  
  
            }  
        }  
        iframeHtml += ' />';  
        jQuery(iframeHtml).appendTo(document.body);  
  
        return jQuery('#' + frameId).get(0);  
    },  
    createUploadForm: function(id, fileElementId, data)  
    {  
        //create form  
        var formId = 'jUploadForm' + id;  
        var fileId = 'jUploadFile' + id;  
        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');  
        if(data)  
        {  
            for(var i in data)  
            {  
                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);  
            }  
        }  
        var oldElement = jQuery('#' + fileElementId);  
        var newElement = jQuery(oldElement).clone();  
        jQuery(oldElement).attr('id', fileId);  
        jQuery(oldElement).before(newElement);  
        jQuery(oldElement).appendTo(form);  
  
        /*var oldElement = jQuery('#' + fileElementId); 
         var newElement = oldElement.clone(true); 
         newElement[0].files=oldElement[0].files; 
         oldElement.attr('id', fileId); 
         oldElement.before(newElement); 
         oldElement.appendTo(form);*/  
  
        //set attributes  
        jQuery(form).css('position', 'absolute');  
        jQuery(form).css('top', '-1200px');  
        jQuery(form).css('left', '-1200px');  
        jQuery(form).appendTo('body');  
        return form;  
    },  
  
    ajaxFileUpload: function(s) {  
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout  
        s = jQuery.extend({}, jQuery.ajaxSettings, s);  
        var id = new Date().getTime()  
        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));  
        var io = jQuery.createUploadIframe(id, s.secureuri);  
        var frameId = 'jUploadFrame' + id;  
        var formId = 'jUploadForm' + id;  
        // Watch for a new set of requests  
        if ( s.global && ! jQuery.active++ )  
        {  
            jQuery.event.trigger( "ajaxStart" );  
        }  
        var requestDone = false;  
        // Create the request object  
        var xml = {}  
        if ( s.global )  
            jQuery.event.trigger("ajaxSend", [xml, s]);  
        // Wait for a response to come back  
        var uploadCallback = function(isTimeout)  
        {  
            var io = document.getElementById(frameId);  
            try  
            {  
                if(io.contentWindow)  
                {  
                    xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;  
                    xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;  
  
                }else if(io.contentDocument)  
                {  
                    xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;  
                    xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;  
                }  
                //去掉html标签,以便返回的json能转换成对象  
                if(xml.responseText){  
                    xml.responseText = xml.responseText.replace(/<pre[^>]*>|<\/pre>/g,'');  
                }  
            }catch(e)  
            {  
                jQuery.handleError(s, xml, null, e);  
            }  
            if ( xml || isTimeout == "timeout")  
            {  
                requestDone = true;  
                var status;  
                try {  
                    status = isTimeout != "timeout" ? "success" : "error";  
                    // Make sure that the request was successful or notmodified  
                    if ( status != "error" )  
                    {  
                        // process the data (runs the xml through httpData regardless of callback)  
                        var data = jQuery.uploadHttpData( xml, s.dataType );  
  
                        // If a local callback was specified, fire it and pass it the data  
                        if ( s.success )  
                            s.success( data, status );  
  
                        // Fire the global callback  
                        if( s.global )  
                            jQuery.event.trigger( "ajaxSuccess", [xml, s] );  
                    } else  
                        jQuery.handleError(s, xml, status);  
                } catch(e)  
                {  
                    status = "error";  
                    jQuery.handleError(s, xml, status, e);  
                }  
  
                // The request was completed  
                if( s.global )  
                    jQuery.event.trigger( "ajaxComplete", [xml, s] );  
  
                // Handle the global AJAX counter  
                if ( s.global && ! --jQuery.active )  
                    jQuery.event.trigger( "ajaxStop" );  
  
                // Process result  
                if ( s.complete )  
                    s.complete(xml, status);  
  
                jQuery(io).unbind()  
  
                setTimeout(function()  
                {  try  
                {  
                    jQuery(io).remove();  
                    jQuery(form).remove();  
  
                } catch(e)  
                {  
                    jQuery.handleError(s, xml, null, e);  
                }  
  
                }, 100)  
  
                xml = null  
  
            }  
        }  
        // Timeout checker  
        if ( s.timeout > 0 )  
        {  
            setTimeout(function(){  
                // Check to see if the request is still happening  
                if( !requestDone ) uploadCallback( "timeout" );  
            }, s.timeout);  
        }  
        try  
        {  
  
            var form = jQuery('#' + formId);  
            jQuery(form).attr('action', s.url);  
            jQuery(form).attr('method', 'POST');  
            jQuery(form).attr('target', frameId);  
            if(form.encoding)  
            {  
                jQuery(form).attr('encoding', 'multipart/form-data');  
            }  
            else  
            {  
                jQuery(form).attr('enctype', 'multipart/form-data');  
            }  
            jQuery(form).submit();  
  
        } catch(e)  
        {  
            jQuery.handleError(s, xml, null, e);  
        }  
  
        jQuery('#' + frameId).load(uploadCallback  );  
        return {abort: function () {}};  
  
    },  
  
    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" ) 
            eval( "data = " + data ); 
        // evaluate scripts within html 
        if ( type == "html" ) 
            jQuery("<div>").html(data).evalScripts();*/  
        //修改原生js代码返回需要的图片上传key  去掉<script>标签内容  解决跨域问题  
        var reg=/<script[^>]*>.*(?=<\/script>)<\/script>/gi;  
        data = data.replace(reg,'');  
  
        return data;  
    }  
})  

方法:function ajaxFileUpload(id){
        $.ajaxFileUpload({
                url: “”, //用于文件上传的服务器端请求地址
                secureuri: false, 
                fileElementId: id, //文件上传空间的id属性  <input type="file" id="file" name="file" />
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                	data=JSON.parse(data);
                	var ids=id.substr(-1)-1;
                	imgLists[ids]=data.filename;
                  	$("#"+id).siblings("img").attr("src",data.picpath);
					/*	if(navigator.userAgent.indexOf("MSIE")>-1){
							file=$("#"+obj);
							file.select();
				            file.blur();
				var reallocalpath = document.selection.createRange().text//IE下获取实际的本地文件路径
				    reallocalpath= reallocalpath.replace(/\\/g, "/");
				     
				              var l=obj.substring(obj.length-1,obj.length);
				          $("#"+obj).siblings("img").css({"opacity":"0"});
				           $("#"+obj).parent(".img_item").css({"background":"url('"+reallocalpath+"') no-repeat center 20px","background-size":"100% auto","filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+reallocalpath+"',sizingMethod='scale')"});
						
					}else{
						$("#"+obj).siblings("img").attr("src",URL.createObjectURL(document.getElementById(obj).files[0]));
					
					}
					*/
                }
                
           })
        return false;
    }

二维码加载中...
本文作者:lininn      文章标题: ajax跨域上传图片
本文地址:?post=86
版权声明:若无注明,本文皆为“覆手为雨”原创,转载请保留文章出处。
分享本文至:

返回顶部    首页    手机版本    后花园   会员注册   
版权所有:覆手为雨    站长: lininn