好资源导航 » 文章资讯 » PHP + plupload.js实现多图上传并显示进度条加删除实例代码

PHP + plupload.js实现多图上传并显示进度条加删除实例代码

2024-02-28 05:06:03 39

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(); } }) }

PHP代码：

"您还未选择图片"));
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;
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

PHP + plupload.js实现多图上传并显示进度条加删除实例代码

热门推荐

随机推荐