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 successfulupload_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