JS插件plupload.js实现多图上传并显示进度条
本文实例为大家分享了plupload.js多图上传的具体代码，供大家参考，具体内容如下
HTML代码：
<!DOCTYPEhtml>
<head>
<metacharset="utf-8"/>
<metaname="viewport"content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>多图上传</title>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript"src="plupload.full.min.js"></script>
</head>
<body>
<styletype="text/css">
*{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;}
</style>
<divclass="demo">
<ahref="javascript:void(0)"id="btn"></a>
<ulid="ul_pics"class="ul_picsclearfix">
</ul>
</div>
<scripttype="text/javascript">
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+="<liid='"+file['id']+"'><divclass='progress'><spanclass='bar'></span><spanclass='percent'>上传中0%</span></div></li>";
});
$("#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("<imgsrc='"+this.url+"'/><ionclick='delimg(this)'>x</i><inputtype='hidden'name=''value='"+this.url+"'>");
},
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();
}
})
}
</script>
</body>
</html>
PHP代码：
<?php
$typeArr=array("jpg","png","gif");//允许上传文件格式
$path="files/";//上传路径
if(isset($_POST)){
if($_GET['get']=="upimg"){
$name=$_FILES['file']['name'];
$size=$_FILES['file']['size'];
$name_tmp=$_FILES['file']['tmp_name'];
if(empty($name)){
echojson_encode(array("error"=>"您还未选择图片"));
exit;
}
$type=strtolower(substr(strrchr($name,'.'),1));//获取文件类型
if(!in_array($type,$typeArr)){
echojson_encode(array("error"=>"清上传jpg,png或gif类型的图片！"));
exit;
}
if($size>(1024*1024*10)){
echojson_encode(array("error"=>"图片大小已超过10MB！"));
exit;
}
$pic_name=time().rand(10000,99999).".".$type;//图片名称
$pic_url=$path.$pic_name;//上传后图片路径+名称
if(move_uploaded_file($name_tmp,$pic_url)){//临时文件转移到目标文件夹
echojson_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));
}else{
echojson_encode(array("error"=>"上传有误，清检查服务器配置！"));
}
}
if($_GET['get']=="delimg"){
$imgsrc=$_GET['imgurl'];
unlink($imgsrc);
echo1;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。