PHP仿微信多图片预览上传实例代码

　　生产图片区域，上传按钮#btn可替换自己想要的图片

　　 <ul id=ul_pics class=ul_pics clearfix> <li><img src=logo.png id=btn class=img_common /></li> </ul>

　　plupload上传

　　 var uploader = new plupload.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 { var li = ; plupload.each(files, function(file) { //遍历文件 li += <li id= + file[id] + ><div class=progress><span class=bar></span><span class=percent>0%</span></div></li>; }); $(#ul_pics).prepend(li); uploader.start(); } }, UploadProgress: function(up, file) { //上传中，显示进度条 var percent = file.percent; $(# + file.id).find(.bar).css({width: percent + %}); $(# + file.id).find(.percent).text(percent + %); }, FileUploaded: function(up, file, info) { //文件上传成功的时候触发 var data = eval(( + info.response + ));//解析返回的json数据+ /><img class=img_common onclick=delPic( + data.pic + , + file.id + ) src= + data.pic + />);//追加图片 }, Error: function(up, err) { //上传出错的时候触发t();

　　ajax删除上传的图片

　　 function delPic(pic, file_id) { //删除图片 参数1图片路径 参数2 随机数 if (confirm(确定要删除吗？)) { $.post(del.php, {pic: pic}, function(data) { $(# + file_id).remove() }) } }

　　本文为原创文章，如需转载，请注明来源保留原文链接：