PHP Imitation micro-letter multi-image Preview upload Instance code _php instance

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 the constructor for the instance runtimes: ' Html5,flash,silverlight,html4 ',//upload plugin initialization Choose the order of precedence in that way Browse_button: ' btn ',//Upload button  URL: "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 ',//maximum upload file size (format 100b, 10kb, 10MB, 1GB) Mime_types: [//Allow file upload type 
 {title: "Files", Extensions: "Jpg,png,gif,jpeg"}] }, Multi_selection:true,//true:ctrl multiple file upload, false single file upload init: {filesadded:function (up, files) {//File upload before if ($ ("#ul_pics"). Children ("Li"). Length >) {alert ("You upload too many pictures!") 
    "); 
   Uploader.destroy (); 
    else {var li = '; Plupload.each (Files, function (file) {//Traverse file Li + + "<li id= '" + file[' ID '] + "' ><div class= ' progress" &GT;&L 
    T;span class= ' bar ' ></span><span class= ' percent ' >0%</span></div></li> '; 
    }); 
    $ ("#ul_pics"). Prepend (LI); 
Uploader.start ();   }, Uploadprogress:function (up, file) {//cross, 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 triggering var data = eval ("(+ Info.response +)");/parse returned JSON data $ ("#" + file.id). HTML ("<input type= ' hidden ' name= ' pic[') ' value= '" + data.pic + "'/><input type= ' hidden ' name= ' p ic_name[] ' value= ' + data.name + ' '/> ");//Append picture}, Error:function (up, err) {///Upload Error triggering alert (err.message); 
} 
 } 
});


 Uploader.init ();

Ajax 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 () 
  }) 
 } 

This article for the original article, if you want to reprint, please specify the source sucaihuo.com and retain the original link: http://www.sucaihuo.com/js/830.html