PHP + plupload.js实现多图上传并显示进度条加删除实例代码
PHP+plupload.jsJS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码
HTML代码:
多图上传
*{margin:0px;padding:0px;font-family:MicrosoftYahei;box-sizing:border-box;-webkit-box-sizing:border-box;}
.demo{max-width:640px;margin:0auto;min-width:320px;}
.ul_pics{float:left;}
.ul_picsli{float:left;margin:0px;padding:0px;margin-left:5px;margin-top:5px;position:relative;list-style-type:none;border:1pxsolid#eee;width:80px;height:80px;}
.ul_picsliimg{width:80px;height:80px;}
.ul_picslii{position:absolute;top:0px;right:-1px;background:red;cursor:pointer;font-style:normal;font-size:10px;width:14px;height:14px;text-align:center;line-height:12px;color:#fff;}
.progress{position:relative;margin-top:30px;background:#eee;}
.bar{background-color:green;display:block;width:0%;height:15px;}
.percent{position:absolute;height:15px;top:-18px;text-align:center;display:inline-block;left:0px;width:80px;color:#666;line-height:15px;font-size:12px;}
.demo#btn{width:80px;height:80px;margin-left:5px;margin-top:5px;border:1pxdotted#c2c2c2;background:url(up.png)no-repeatcenter;background-size:30pxauto;text-align:center;line-height:120px;font-size:30px;color:#666;float:left;}
varuploader=newplupload.Uploader({//创建实例的构造方法
runtimes:'html5,flash,silverlight,html4',//上传插件初始化选用那种方式的优先级顺序
browse_button:'btn',//上传按钮
url:"upimgs.php?get=upimg",//远程上传地址
flash_swf_url:'plupload/Moxie.swf',//flash文件地址
silverlight_xap_url:'plupload/Moxie.xap',//silverlight文件地址
filters:{
max_file_size:'10mb',//最大上传文件大小(格式100b,10kb,10mb,1gb)
mime_types:[//允许文件上传类型
{title:"files",extensions:"jpg,png,gif"}
]
},
multipart_params:{},//文件上传附加参数
file_data_name:"upimg",//文件上传的名称
multi_selection:false,//true:ctrl多文件上传,false单文件上传
init:{
FilesAdded:function(up,files){//文件上传前
if($("#ul_pics").children("li").length>5){
alert("您上传的图片太多了!");
uploader.destroy();
}else{
varli='';
plupload.each(files,function(file){//遍历文件
li+="上传中0% ";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress:function(up,file){//上传中,显示进度条
varpercent=file.percent;
$("#"+file.id).find('.bar').css({"width":percent+"%"});
$("#"+file.id).find(".percent").text("上传中"+percent+"%");
},
FileUploaded:function(up,file,info){//文件上传成功的时候触发
vardata=eval("("+info.response+")");
$("#"+file.id).html("
x");
},
Error:function(up,err){//上传出错的时候触发
alert("error");
}
}
});
uploader.init();
functiondelimg(o){
varsrc=$(o).prev().attr("src");
$.post("upimgs.php?get=delimg&imgurl="+src,function(data){
if(data==1){
$(o).parent().remove();
}
})
}