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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.