Detailed explanation of PHP imitation WeChat multiple image preview and upload examples

This article mainly introduces relevant information on the PHP imitation WeChat multi-picture preview and upload method. Friends who need it can refer to the

production picture area and the upload button #btn to replace the picture you want

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

plupload upload

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

ajax delete uploaded pictures

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

Summary: The above is the entire content of this article, I hope it can help everyone learn Helps.

Related recommendations:

phpBaidu weather forecast for WeChat development

## php Implementation of custom menu for WeChat development

php Simple implementation of socket communication

The above is the detailed content of Detailed explanation of PHP imitation WeChat multiple image preview and upload examples. For more information, please follow other related articles on the PHP Chinese website!