Heim > Backend-Entwicklung > PHP-Tutorial > Detaillierte Erläuterung der PHP-Imitation von WeChat-Beispielen für die Vorschau mehrerer Bilder und das Hochladen

Detaillierte Erläuterung der PHP-Imitation von WeChat-Beispielen für die Vorschau mehrerer Bilder und das Hochladen

墨辰丷
Freigeben: 2023-03-29 06:04:02
Original
1274 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zur PHP-Imitation der WeChat-Mehrbildvorschau und -Upload-Methode vorgestellt. Freunde, die diese benötigen, können sich auf den

Produktionsbildbereich beziehen, und die Upload-Schaltfläche #btn kann das Bild ersetzen du willst

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

plupload upload

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();
Nach dem Login kopieren

ajax löscht hochgeladene Bilder

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

Zusammenfassung: Das Obige ist hoffentlich der gesamte Inhalt dieses Artikels Es kann jedem beim Lernen helfen. Hilft.

Verwandte Empfehlungen:

phpBaidu-Wettervorhersage für WeChat-Entwicklung

php Implementierung eines benutzerdefinierten Menüs für die WeChat-Entwicklung

phpeinfache Implementierung der Socket-Kommunikation

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der PHP-Imitation von WeChat-Beispielen für die Vorschau mehrerer Bilder und das Hochladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage