Thinkphp+swfupload Multi-image Upload example Classic and practical PHP multi-image upload

First on a picture for everyone to see the effect, there is a need to download learning. Not necessarily in the thinkphp, but I very much like to use thinkphp to do the development.

650) this.width=650; "title=" qq20140321163819.jpg "src=" http://s3.51cto.com/wyfs02/M02/22/F3/ Wkiol1mr-0ac72bcaailmrma__y660.jpg "alt=" wkiol1mr-0ac72bcaailmrma__y660.jpg "style=" padding:0px;margin:0px; Vertical-align:top;border:none; "/>

All right. Now what we need is, download a lot of swfupload.js online, own Baidu Bar. Before someone added I QQ said that I write most of the blog is code, do not understand, I later write blog also first explain ideas, and then began to paste code share

The entire multi-image upload process

1. Write the HTML code, including the HTML to upload the effects shown later, and load the SWFUpload component. and Flash

2. Upload the image and upload it to PHP, upload it to the address, and load it into the preview area.

3. After clicking X, Ajax calls PHP's method to remove the image from the preview area.

4. When you add a picture and delete a picture in the preview area, you change the value of a hidden field so that you can save the image's address to the database after you complete the upload submission form. (See NEED)

      's All right. Write the HTML code first. (CSS file I will not post)

<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "HTTP// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Tell me more about SWFUpload's configuration items
Upload_url is the PHP address for uploading image processing
File_size_limit Upload Size limit
file_upload_limit     Limit the number of images that users upload at one time, 0 is not limited to    
file_queue_error_ Handler    
file_dialog_complete _handler    the Add File Upload selection box closes the method that executes later    
upload_error_handler       File Upload error when executing the method    
upload_success_ handler    method    
 to execute after the file upload was successful
upload_complete_ handler     the method to execute after the file upload is complete    
debug: false       want to study swfupload can set this to True, Debug mode    
 Next is the PHP code that uploads the image, I just use the TP upload class, simple, easy to understand    
function uploadimg ()  {import (' ORG. Net.uploadfile '); $upload  = new uploadfile ();//  instantiation of the upload class $upload->maxsize  =  3145728 ;//  set attachment upload size $upload->allowexts  = array (' jpg ',  ' gif ',  ' png ',  ' JPEG ');//  set the attachment upload Type $savepath= './uploads/'. Date (' Ymd '). ' /';if  (!file_exists ($savepath)) {mkdir ($savepath);} $upload->savepath =   $savepath;//  Set Attachments upload directory if (! $upload->upload ())  {//  Upload error message $this->error ($upload->geterrormsg ());} else{//  upload success   Get upload file information $info =   $upload->getuploadfileinfo ();} Print_r (J (__root__. ') /'. $info [0][' Savepath ']. ' /'. $info [0][' Savename ']);} 
 After uploading successfully, Echo or Print_ R output address, because he uses the Ajax way. 
      
 preview locale code   
function uploadsuccess (file, serverdata) {addImage (serverData); var  $svalue =$ (' form>input[name=s] '). Val (); if ($svalue = = ") {$ (' form>input[name=s] '). Val (serverdata);} else{$ (' form>input[name=s] '). Val ($svalue + "|" +serverdata);}} Function addimage (SRC) {var newelement =  "<li></li>"; $ ("#pic_list"). Append (newelement); $ (" Img.button "). Last (). bind (" click ",  del);} 
serverdata is the image address returned in PHP , after returning, call the AddImage method directly and load the address into a UL. Update values in hidden fields at the same time    
HTTP://PAN.BAIDU.COM/S/1I4GOR2H Password: SEWG       
Delete picture settings
var del = function () {//var FID = $ (this). The parent (). Prevall (). Length + 1;var src=$ (this). Siblings (' img '). attr (' src '); var $svalue =$ (' form>input[name=s] '). Val (); $.ajax ({type: "GET",//Access WebService use post to request url:window.url+ "/del",// Call WebService's address and method name combination---wsurl/method name data: "Src=\ ' #\ '"/pre>
Ajax way, commit to PHP mode, the success is to update the hidden domain val, and destroy the element.
Function del () {$src =str_replace (__root__. ') /', ', str_replace ('//', '/', $_get[' src ')), if (File_exists ($SRC)) {unlink ($SRC);} Print_r ($_get[' src '); exit ();}
The removal method is simple, is to delete the Ajax submitted address of the file, and return the deleted address, Ajax will process and automatically update the hidden domain val entire thinkphp+swfupload upload image method is finished. Very simple.
<div></div>
This article is from the "10985024" blog, please be sure to keep this source http://10995024.blog.51cto.com/10985024/1727088
Thinkphp+swfupload Multi-image Upload example Classic and practical PHP multi-image upload