Php+jquery+ajax to achieve multiple image upload effect _jquery

Today, I share with you the premise of not refreshing the page, using Php+jquery+ajax to achieve multiple image upload effect. Users simply click to select the image to upload, and the picture is automatically uploaded to the server and displayed on the page.

Html

We'll put a form form on the page, use Post to submit to the background PHP handler upload.php, and note that the Enctype property setting supports file uploads. #preview用来显示上传完毕后的图片. About CSS style settings This article does not add, please refer to the download package source.

Copy Code code 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 Pictures </span>
<input id= "photoimg" type= "file" name= "Photoimg" >
</div>
</form>
<p> Max 100KB, support jpg,gif,png format. </p>
<div id= "Preview" ></div>

Jquery
This example is based on jquery, so you must load the jquery library and Jquery.wallform.js in the page.

Copy Code code as follows:

<script type= "Text/javascript" src= "Jquery.min.js" ></script>
<script type= "Text/javascript" src= "Jquery.wallform.js" ></script>

When you click the button "Add Picture", the Pop-up Selection file dialog box, select the picture to upload, trigger the Change event. The form #imageform then invokes the Jquery.wallform.js Ajaxform () method, submits the form data to the background PHP processing, and processes the display of the page elements based on the returned results. If the upload is successful, the picture will be displayed on the page in a single arrangement. About the use of ajaxform () can refer to this site article: Ajax form submission Plugin jqery form.

Copy Code code 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 processing picture upload, and will upload a good picture in the uploads/directory, note that the directory to have write permission. First you need to detect whether the post is submitted, and then determine whether the picture format, picture size meets the requirements, and then use Move_uploaded_file () to upload the picture, and rename the picture, in the form: Time (). Rand (100,999).

Copy Code code 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 ' Please select the picture to upload ';
Exit
}
$ext = Extend ($name);
if (!in_array ($ext, $EXTARR)) {
echo ' Picture format Error! ';
Exit
}
if ($size > (100*1024)) {
echo ' picture 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 ' On the wrong! ';
}
Exit
}
Get file type suffix
function extend ($file _name) {
$extend = PathInfo ($file _name);
$extend = Strtolower ($extend ["extension"]);
return $extend;
}

Of course, the actual application, can be combined with the database and User Center, the user uploaded pictures stored in the data table, the specific application can be studied by themselves.

The above is the article to share all the content, I hope you can enjoy.