PHP + jQuery + Ajax for multi-Image Upload,

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.

HTML

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">
</Div>
</Form>
<P> up to kb. jpg, gif, and png formats are supported. </P>
<Div id = "preview"> </div>

JQuery
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 ();
});
});

PHP

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 ';
Exit;
}
$ Ext = extend ($ name );
If (! In_array ($ ext, $ extArr )){
Echo 'image format error! ';
Exit;
}
If ($ size> (100*1024 )){
Echo 'image size cannot exceed 100KB ';
Exit;
}
$ 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! ';
}
Exit;
}
// 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.