Shulou(Shulou.com)06/02 Report--

Editor to share with you how to achieve Uploadify multi-upload picture plug-in, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Html:

* Picture:

Js, css to be introduced:

JS code handling:

$(function () {$('# file_upload'). Uploadify ({'formData': {':'}, 'uploader':' {: U ("uploads")}'+ "? session_id=", 'swf':' _ _ PUBLIC__/admin/uploadify/uploadify.swf' 'auto': true, / / whether to start uploading automatically' debug': whether false,// opens the browser to debug 'buttonText':' please select an image', / / upload button text 'fileTypeExts':' * .jpg * .gif;*.bmp;*.png * .jpeg', / / allowed image type 'fileSizeLimit':' 2MB, / / allowed arrogance of a single image 'multi': false, / / whether multiple images are allowed to be uploaded together' uploadLimit': 6, / / number of allowed uploads' successTimeout': 10 / / waiting for server response time 'removeTimeout': 0.2, / / successful display time' onFallback':function () {alert ("you do not have FLASH control installed Unable to upload picture! Please install the FLASH control and try again. ") ;}, 'onUploadSuccess': function (file,data,response) {/ / alert (data); data = $.parseJSON (data); var Image = "

Delete "; if ($(" a [class=del] ") .length > = 5) {alert (" more than 5 entries are not supported for the time being! ") ;} else {$("# previewImgs") .append (Image);});}); / / ajax deletes a picture in the preview list function goDel (objdom,src) {$(objdom). Parent (). Remove (); return false;}

Php backend processes images and returns JSON data:

Public function uploads () {$upload = new\ Think\ Upload (); $upload- > exts = array ('jpg',' gif', 'png',' jpeg'); $upload- > rootPath ='. / Uploads/'; $upload- > savePath ='/ image/commodity/'; if (! is_dir ($upload- > savePath)) {mkdir ($upload- > savePath,0777,TRUE);} $info = $upload- > upload () If (! $info) {echo json_encode ($upload- > getError ());} else {/ / uploaded successfully $info ['Filedata'] [' savepath'] = str_replace ('image',' Uploads/image', $info ['Filedata'] [' savepath']); $path = $info ['Filedata'] [' savepath']. $info ['Filedata'] [' savename']; $image = new\ Think\ Image (); $image- > open ('.'. $path); $thumbpath ='.'. $info ['Filedata'] [' savepath']. $info ['Filedata'] [' savename']; / / $image- > thumb (148,84)-> save ($thumbpath); $path = ltrim ($path,'.'); $thumbpath = ltrim ($thumbpath,'.'); $data = array ('imgpath' = > $path,' thumbpath' = > $thumbpath); echo json_encode ($data);}}

Note: session is lost when uploading pictures. You only need to modify the thinkphp/conf/convention.php to remove the comments in front of the VAR_SESSION_ID, and then configure it as follows:

'uploader':' {: U ("uploads")}'+ "? session_id=", these are all the contents of the article "how to implement the Uploadify multi-upload image plug-in". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.