原生javascript上传图片带进度条【实例分享】
javascript代码：
;
(function(w){
varerror="上传控件不支持您的浏览器！";
//构造函数
functionUploadImg(option){
$u=this;
$u.option=option;
$u.init($u.option);
}
UploadImg.prototype={
//初始化
init:function(){
var$u=this;
//template
$u.addupLoader=
''+
''+
''+
''+
''+
''+
'等待中…… '+
'
'+
' '+
'
'+
''+
' '+
'
';
$u.wrap=$($u.option.el);
$u._creatFrom();
$u.eventChange($u.wrap.childNodes);
},
//生成form模板
_creatFrom:function(){
this.wrap.innerHTML=$u.addupLoader;
},
_removeFrom:function(){
this.wrap.innerHTML="";
},
//事件触发
/*
*对于onchange事件若值没有发生改变的话
*此事件就会失效所以在这里打算将DOM移除
*直接初始化所有方法和事件
*
*/
/**
*@method(eventChange)
*@param{childArr}参数为数组集合
*/
eventChange:function(childArr){
var$u=this;
//提交form表单
addEvent(childArr[0],'change',function(e){
//保存当前this对象
varthisForm=this;
if(!thisForm['file'].files.length==0){
$u._removeFrom();
$u.init();
testWidthHeight(e,function(iSsize){
if(!iSsize){
alert("上传的尺寸为:长为"+$u.option.Max_Width+"宽为"+$u.option.Max_Height);
returnfalse;
}
childArr[2].setAttribute('src',"");
childArr[3].style.display='block';
$u.wrap.style.background="#f3f3f3";
//发送post请求
$u.ajaxPost(thisForm,$u.option.url,function(result){
//post成功
vardata=JSON.parse(result);
$u.maskEvent(childArr);
childArr[2].setAttribute('src',data.url);
childArr[3].style.display='none';
},function(error){
//post失败
console.log(error);
},childArr);
});
}else{
alert("上传个数不能为0");
returnfalse;
}
});
/**
*@method(testWidthHeight)获取上传尺寸大小
*@param{e}事件对象
*@param{callback}回调函数
*/
functiontestWidthHeight(e,callback){
varisSize;
varforms=e.target;
varreader=newFileReader();
reader.onload=function(){
vardataURL=reader.result;
varimage=newImage();
image.onload=function(){
varwidth=image.width;
varheight=image.height;
isSize=width<=$u.option.Max_Width&&height<=$u.option.Max_Height;
if(typeofcallback=='function'){
callback(isSize);
}
};
image.src=dataURL;
};
reader.readAsDataURL(forms.files[0]);
returnisSize;
}
},
//遮罩层上的是事件
maskEvent:function(childArr){
$u=this;
varaddBtn=childArr[4].childNodes[1].childNodes[0];
vardeleBtn=childArr[4].childNodes[1].childNodes[1];
//当鼠标滑过
addEvent($u.wrap,"mouseover",function(){
if(childArr[2].getAttribute('src')){
childArr[4].style.top=0;
}
});
//当鼠标离开
addEvent($u.wrap,"mouseout",function(){
childArr[4].style.top=-300+'px';
});
//修改
addEvent(addBtn,'click',function(){
childArr[0][0].click();
});
//删除
addEvent(deleBtn,'click',function(){
$u.wrap.style.backgroundImage="url(add-bg-upload1.jpg)";
childArr[2].setAttribute('src',"");
});
},
/**
*@method(ajaxPost)上传方法
*@param{fm}当前form表单
*@param{url}url地址
*@param{fnSuc}成功回调
*@param{fnErr}失败回调
*@param{childArr}节点集合
*/
ajaxPost:function(fm,url,fnSuc,fnErr,childArr){
var$u=this;
//进度条
varproGress=childArr[3].childNodes[0];
if(window.XMLHttpRequest){
varxhr=newXMLHttpRequest();
}else{
varxhr=newActiveXObject("Microsoft.XMLHTTP");
}
//data数据
vardata=newFormData(fm);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
//成功回调
if(xhr.status==200){
fnSuc(xhr.responseText);
}else{
if(fnErr){
fnErr(xhr.status);
}
}
}
};
//监听上传进度
addEvent(xhr.upload,"progress",uploadProgress);
//post后台
xhr.open('post',url);
//发送数据
xhr.send(data);
//上传进度
functionuploadProgress(evt){
varloaded=evt.loaded;//已上传的文件大小
varallTotal=evt.total;//总大小
varper=Math.floor((loaded/allTotal)*100)+'%';
proGress.innerHTML=per;
proGress.style.width=per;
}
},
};
//获取元素
function$(selectors){
returndocument.querySelector(selectors);
}
//事件监听
functionaddEvent(el,type,fn){
if(el.addEventListener){
el.addEventListener(type,fn,false);
}elseif(el.attachEvent){
el.attachEvent('on'+type,function(){
fn.call(el);
});
}else{
thrownewError('notsupportedorDOMnotloaded');
}
}
//判断浏览器是否存在file属性
if(window.File&&window.FileList){
window.UploadImg=UploadImg;
}else{
alert(error);
returnfalse;
}
})(window);
PHP代码：
$value){
$$key=$value;
}
$path='upload/'.time().strtolower(strstr($name,'.'));//修改上传文件的名称,strstr($name,'.')是获取后缀名
move_uploaded_file($tmp_name,$path);
$path=strstr($path,$path[0]);//图片的存储地址
$arr=array(
"url"=>$path
);
$json=json_encode($arr);//json
echo$json;
?>
CSS代码：
.couser-img-upload{
width:280px;
height:160px;
cursor:pointer;
position:relative;
overflow:hidden;
background:url(add-bg-upload1.jpg);
}
.couser-img-upload:hover{
border:2pxsolid#00caac;
background:url(add-bg-upload.jpg);
}
.kechenFengMian{
display:none;
}
.upload-progress{
display:none;
width:90%;
position:absolute;
overflow:hidden;
border:1pxsolid#00caac;
border-radius:8px;
top:50%;
margin-top:-7.5px;
left:50%;
padding:2px;
margin-left:-46%;
font-size:12px;
}
.upload-progress.upload-son{
display:inline-block;
background:#00caac;
border-radius:8px;
text-align:center;
color:#fff;
}
.mask-Div{
position:absolute;
top:-300px;
width:100%;
height:100%;
}
.mask-Div.mask-show{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
}
.mask-Div.button-div{
width:140px;
height:50px;
position:absolute;
left:50%;
top:50%;
margin-left:-70px;
margin-top:-25px;
}
.mask-Div.button-divspan{
display:block;
width:50px;
height:50px;
border-radius:50%;
overflow:hidden;
background:url(tianjiashanchu.png)no-repeat;
}
.mask-Div.button-divspan.upload-btn{
background-position:0px0px;
float:left;
}
.mask-Div.button-divspan.deleteImg-btn{
background:url(tianjiashanchu.png)no-repeat;
background-position:-50px0px;
float:right;
}
.mask-Div.button-divspan.upload-btn:hover{
background-position:0px-50px;
}
.mask-Div.button-divspan.deleteImg-btn:hover{
background-position:-50px-50px;
}
Html代码：
