PHP + jQuery + Ajax multi-Image Upload

Source: Internet
Author: User
Provides various official and user-released code examples. For code reference, you are welcome to exchange and learn. Today we will introduce a multi-Image Upload plug-in: plupload, which achieves multi-Image Upload through PHP + Ajax. You only need to click to select the image to be uploaded, and then the image is automatically uploaded to the server and immediately displayed on the page.
If you want to see Detailed tutorialHttp://www.sucaihuo.com/js/3.html, and DEMOAnd can be downloaded for free. Var uploader = new plupload. Uploader ({// constructor for creating an instance
Runtimes: 'html5, flash, silverlight, html4 ',
// Select the priority order for the upload plug-in Initialization Method
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: '500kb ',
// Maximum size of the uploaded file (in the format of 100b, 10kb, 10 mb, 1 gb)
Mime_types: [// File Upload type allowed
{
Title: "files ",
Extensions: "jpg, png, gif"
}]
},
Multi_selection: true,
// True: ctrl Multifile upload; false: Single File Upload
Init :{
FilesAdded: function (up, files) {// before File Upload
If ($ ("# ul_pics"). children ("li"). length> 30 ){
Alert ("You have uploaded too many images! ");
Uploader. destroy ();
} Else {
Var li = '';
Plupload. each (files,
Function (file) {// traverses a file
Li + ="
  • 0%

  • ";
    });
    $ ("# Ul_pics"). append (li );
    Uploader. start ();
    }
    },
    UploadProgress: function (up, file) {// upload in progress, display progress bar
    $ ("#" + File.id).find('.bar').css ({
    "Width": file. percent + "%"
    }). Find (". percent"). text (file. percent + "% ");
    },
    FileUploaded: function (up, file, info) {// triggered when the file is uploaded successfully
    Var data = JSON. parse (info. response );
    $ ("#" + File.id).html ("

    "+ Data. name +"

    ");
    },
    Error: function (up, err) {// triggered when an upload Error occurs
    Alert (err. message );
    }
    }
    });
    Uploader. init ();
    More special jQuery effects: http://www.sucaihuo.com/js. You can enjoy it. New users can learn ^_^.

    Php?jquery=ajaxmultiimage upload. Zip (423.47 KB download: 364 times)

    AD: truly free, domain name + VM + enterprise mailbox = 0 RMB

    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.