PHP function sample code imitating WeChat multiple image upload preview-PHP Tutorial-php.cn

PHP function sample code imitating WeChat multiple image upload preview

怪我咯

Release： 2023-03-12 22:42:02

Original

1585 people have browsed it

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

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

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

Copy after login

pluploadupload

var uploader = new plupload.Uploader({//创建实例的构造方法 
 runtimes: &#39;html5,flash,silverlight,html4&#39;, //上传插件初始化选用那种方式的优先级顺序 
 browse_button: &#39;btn&#39;, // 上传按钮 
 url: "ajax.php", //远程上传地址 
 flash_swf_url: &#39;plupload/Moxie.swf&#39;, //flash文件地址 
 silverlight_xap_url: &#39;plupload/Moxie.xap&#39;, //silverlight文件地址 
 filters: { 
  max_file_size: &#39;10mb&#39;, //最大上传文件大小（格式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 = &#39;&#39;; 
    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();

Copy after login

ajax delete uploaded image

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

Copy after login

The above is the detailed content of PHP function sample code imitating WeChat multiple image upload preview. For more information, please follow other related articles on the PHP Chinese website!