本例子是针对点击更换头像而来,请看代码
html部分
<div>
<div><img class="file_img" src="../img/头像@3x.png"/></div>
<div>
<span>点击更换</span>
<input type="file" name="" id="" value="" class="file_btn" />
</div>
</div>
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<versions.length; i++){
try{
request=new ActiveXObject(versions[i]);
if(request){
return request;
}
}catch(e){
request=false;
}
}
}
return request;
}
}