PHP仿微信多图片预览上传实例代码
生产图片区域，上传按钮#btn可替换自己想要的图片
<ulid="ul_pics"class="ul_picsclearfix"> <li><imgsrc="logo.png"id="btn"class="img_common"/></li> </ul>
plupload上传
varuploader=newplupload.Uploader({//创建实例的构造方法
runtimes:'html5,flash,silverlight,html4',//上传插件初始化选用那种方式的优先级顺序
browse_button:'btn',//上传按钮
url:"ajax.php",//远程上传地址
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,jpeg"}
]
},
multi_selection:true,//true:ctrl多文件上传,false单文件上传
init:{
FilesAdded:function(up,files){//文件上传前
if($("#ul_pics").children("li").length>30){
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").prepend(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+")");//解析返回的json数据
$("#"+file.id).html("<inputtype='hidden'name='pic[]'value='"+data.pic+"'/><inputtype='hidden'name='pic_name[]'value='"+data.name+"'/><imgclass='img_common'onclick=delPic('"+data.pic+"','"+file.id+"')src='"+data.pic+"'/>");//追加图片
},
Error:function(up,err){//上传出错的时候触发
alert(err.message);
}
}
});
uploader.init();
ajax删除上传的图片
functiondelPic(pic,file_id){//删除图片参数1图片路径参数2随机数
if(confirm("确定要删除吗？")){
$.post("del.php",{pic:pic},function(data){
$("#"+file_id).remove()
})
}
}
本文为原创文章，如需转载，请注明来源sucaihuo.com并保留原文链接：http://www.sucaihuo.com/js/830.html