AjaxUploadFile 上传图片控件

本例子是针对点击更换头像而来，请看代码

html部分

					

					

						点击更换
						
					
				

js部分

1.使用部分

//点击更换头像
	$(".file_btn").change(function(){
		//服务器url
		var host ='',
		imgUploadUrl='';
		url = host+imgUploadUrl;
		//上传图片地址
		var imgFile = $(this).prop('files')[0];
		var File = $(".file_btn").val();
			data = { "file":{
		                  "imgFile":imgFile
		            }  
		       	};
			FileUpload(File,url,data, function(data){ 
			        console.log(data)
			})
	  }) ;

2.封装部分

//获取头像url
	function getObjectURL(file){
		var url = null ;
	    if (window.createObjectURL!=undefined){
	      url = window.createObjectURL(file) ;
	    }
	    else if (window.URL!=undefined){
	      url = window.URL.createObjectURL(file) ;
	    } 
	    else if (window.webkitURL!=undefined) {
	      url = window.webkitURL.createObjectURL(file) ;
	    }
	    return url ;
	}
	function FileUpload(flie,url,data,$success){
	    //判断图片格式
	    if (!/\.(jpg|jpeg|png|JPG|PNG|JPEG)$/.test(flie)){
	     	alert("图片类型必须是.gif,jpeg,jpg,png中的一种") 
	     	return false;
            }else{  
                    var ajaxFile=new uploadFile({
                    "url":url,
                    "timeout":5000,
                    "async":true,
	                 xhrFields: {
			            withCredentials: true
			        },
			        crossDomain: true,
                    "data":data,
                    onloadstart:function(){
                        //alert("开始上传");
                        
                    },
                    onload:function(data){
                   	//后台接受到的信息
                    },
                    onerror:function(er){
                        console.log(er);

                    },
                    onabort:function(){
                        //alert("取消上传");
                    },
                    ontimeout:function(){
                        //alert("上传时间到");
                    },
                    onloadend:function(){
                      //上传完成
                    },
                    onprogress:function(e){
                      //  console.log(e);
                    }
                });
            }
       }  

3.控件部分（AjaxUploadFile.js）

/***
* @time 2018-05-20
*
**/
uploadFile=function(data){
	var form=new FormData();
	var xhr=XHR();
	//初始参数
	var type="POST";
	var url=data["url"]||"";
	var dataType=data["dataType"]||"json";
	var async=data["async"]||true;
	var timeout=data["timeout"]||10000;
	//非文件数据
	for(var key in data["data"]){
		if(key!="files"&&key!="file"){
			form.append(key,data["data"][key]);
		}
	}
	//多文件上传
	for(var name in data["data"]["files"]){
		for(var f in data["data"]["files"][name]){
			form.append(name+"[]",data["data"]["files"][name][f]);
		}
	}
	//单文件上传
	for(var name in data["data"]["file"]){
		form.append(name,data["data"]["file"][name]);
	}
	xhr.open(type,url,async);
	xhr.withCredentials = true;
	xhr.timeout=parseInt(timeout);
	//传输成功是触发事件
	xhr.οnlοad=function(){
		if(data.onload){
			switch(dataType.toLowerCase()){
				case "json":
					data.onload(JSON.parse(xhr.responseText));
				break;
				case "text":
					data.onload(xhr.responseText);
				break;
				case "xml":
					data.onload(xhr.responseXML);
				break;
				default:
					data.onload(xhr.responseText);
				break;
			}
		}
	};
	//传输被用户取消触发事件
	xhr.οnabοrt=function(){
		if(data.onabort)
			data.onabort(xhr);
	};
	//传输错误触发事件
	xhr.οnerrοr=function(){
		if(data.onerror){
			var er={
				"readyState":xhr.readyState,
				"status":xhr.status,
			};
			data.onerror(er);
		}
	};
	//传输时间到
	xhr.ontimeout=function(){
		if(data.ontimeout){
			data.ontimeout(xhr);
		}
	}
	//传输开始触发事件
	xhr.οnlοadstart=function(){
		if(data.onloadstart){
			data.onloadstart(xhr);
		}
	};
	//传输结束触发事件
	xhr.onloadend=function(){
		if(data.onloadend){
			data.onloadend(xhr);
		}
	};
	//上传进度监控函数
	xhr.upload.οnprοgress=function(e){
		if(data.onprogress){
			data.onprogress(e);
		}
		//e.loaded//目前已经上传大小
		//e.totalSize//总共要上传大小
	}
	//发送
	xhr.send(form);
	//取消上传
	this.abort=function(){
		xhr.abort();
	}

	function XHR(){
		var request=false;
		//window对象中有XMLHttpRequest存在就是非IE
		if(window.XMLHttpRequest){
			request=new XMLHttpRequest();
			if(request.overrideMimeType){
				request.overrideMimeType("text/xml");
			}
		//window对象中有ActiveXObject存在就是IE低版本5 6 
		}else if(window.ActiveXObject){
			var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
			for(var i=0; i