PHP + jQuery + Ajax for multi-Image Upload,

Source: Internet
Author: User
Tags jquery library

PHP + jQuery + Ajax for multi-Image Upload,

Today, I want to share with you how to use PHP + jQuery + Ajax to upload multiple images without refreshing new pages. You only need to click to select the image to be uploaded, and then the image is automatically uploaded to the server and displayed on the page.


We place a form on the page and use post to submit it to the backend php processing program upload. php. Note that the enctype attribute setting must support file upload. # Preview is used to display the uploaded image. For more information about css style settings, see the source code of the downloaded package.

Copy codeThe Code is as follows:
<Form id = "imageform" method = "post" enctype = "multipart/form-data" action = "upload. php">
<Div id = "up_status" style = "display: none"> </div>
<Div id = "up_btn" class = "btn">
<Span> Add an image </span>
<Input id = "photoimg" type = "file" name = "photoimg">
<P> up to kb. jpg, gif, and png formats are supported. </P>
<Div id = "preview"> </div>

This example is based on jQuery. Therefore, the jquery library and jquery. wallform. js must be loaded on the page.

Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jquery. min. js"> </script>
<Script type = "text/javascript" src = "jquery. wallform. js"> </script>

After you click "add image", the Select File Dialog Box is displayed. Select the image to be uploaded and the change event is triggered. Then form # imageform calls the ajaxForm () method of jquery. wallform. js, submits the form data to the backend PHP for processing, and processes the display of page elements based on the returned results. If the upload is successful, the images are displayed on the page one by one. For the use of ajaxForm (), refer to this article: Ajax form submission plug-in jqery form.

Copy codeThe Code is as follows:
$ (Function (){
$ ('# Photoimg'). die ('click'). live ('change', function (){
Var status = $ ("# up_status ");
Var btn = $ ("# up_btn ");
$ ("# Imageform"). ajaxForm ({
Target: '# preview ',
BeforeSubmit: function (){
Status. show ();
Btn. hide ();
Success: function (){
Status. hide ();
Btn. show ();
Error: function (){
Status. hide ();
Btn. show ();
}). Submit ();


Upload. php processes image uploads and stores uploaded images in the uploads/directory. Note that you must have the write permission for this directory. First, check whether the image is submitted in POST mode, and then determine whether the image format and size meet the requirements. Then, use move_uploaded_file () to upload the image and rename the image in the format of time (). and (100,999 ).

Copy codeThe Code is as follows:
$ Path = "uploads /";
$ ExtArr = array ("jpg", "png", "gif ");
If (isset ($ _ POST) and $ _ SERVER ['request _ method'] = "POST "){
$ Name = $ _ FILES ['photoimg '] ['name'];
$ Size = $ _ FILES ['photoimg '] ['SIZE'];
If (empty ($ name )){
Echo 'select the image to upload ';
$ Ext = extend ($ name );
If (! In_array ($ ext, $ extArr )){
Echo 'image format error! ';
If ($ size> (100*1024 )){
Echo 'image size cannot exceed 100KB ';
$ Image_name = time (). rand (100,999). ".". $ ext;
$ Tmp = $ _ FILES ['photoimg '] ['tmp _ name'];
If (move_uploaded_file ($ tmp, $ path. $ image_name )){
Echo ' ';
} Else {
Echo 'upload error! ';
// Obtain the file type suffix
Function extend ($ file_name ){
$ Extend = pathinfo ($ file_name );
$ Extend = strtolower ($ extend ["extension"]);
Return $ extend;

Of course, in practical applications, you can combine it with databases and user centers to save images uploaded by users in data tables. You can study the specific applications on your own.

The above is all the content shared in this article. I hope you will like it.

Related Article

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: 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.