PHP imitation WeChat multi-image upload preview function sample code

This article mainly introduces the PHP imitation multi-image Preview upload method related information, the need for friends can refer to the following

Production picture area, upload button #btn can replace the picture you want

<ul id= "Ul_pics" class= "Ul_pics clearfix" >  <li></li> </ul>

Plupload Upload

var uploader = new Plupload. Uploader ({//Create instance Construction method runtimes: ' Html5,flash,silverlight,html4 ',//upload plugin Initialize the order of precedence in that way Browse_button: ' btn ',//Upload button U RL: "ajax.php",//Remote upload address flash_swf_url: ' plupload/moxie.swf ',//flash file address silverlight_xap_url: ' plupload/moxie.xap ',/ /silverlight File Address filters: {max_file_size: ' 10mb ',//MAX upload file size (format 100b, 10kb, 10MB, 1GB) Mime_types: [//Allow file upload type {ti Tle: "Files", Extensions: "Jpg,png,gif,jpeg"}]}, Multi_selection:true,//true:ctrl multiple file uploads, false single file upload init: {Fil Esadded:function (up, files) {//file before uploading if ($ ("#ul_pics"). Children ("Li"). Length >) {alert ("You've uploaded too many pictures!").     ");    Uploader.destroy ();     } else {var li = '; Plupload.each (Files, function (file) {//traversal file Li + = "<li id= '" + file[' id ') + "' ><p class= ' progress ' ><s     Pan class= ' bar ' ></span><span class= ' percent ' >0%</span></p></li> ";     });     $ ("#ul_pics"). Prepend (LI);    Uploader.start (); }}, Uploadprogress:fuNction (up, file) {//on crosses, show progress bar var percent = file.percent;    $ ("#" + file.id). Find ('. Bar '). css ({"width": percent + "%"});   $ ("#" + file.id). Find (". Percent"). Text (Percent + "%");    }, Fileuploaded:function (up, file, info) {//File upload succeeds when uploading var data = eval ("(" + Info.response + ")");//Parse the returned JSON data $ ("#" + file.id). HTML ("<input type= ' hidden ' name= ' pic[] ' value= '" + data.pic + "'/><input type= ' hidden ' name= ' pic_name[] ' value= ' + data.name + '/> ");//Append picture}, Error:function (up, err) {////Upload Error trigger alert (err.message); }  } }); Uploader.init ();

Ajax to delete uploaded pictures

function Delpic (pic, file_id) {//delete picture parameter 1 picture Path parameter 2 random number  if (Confirm ("OK to delete? ") {   $.post (" del.php ", {pic:pic}, function (data) {    $ (" # "+ file_id). Remove ()}   )}  }