Php+jquery+ajax implementation of multi-image upload Introduction

Php+jquery+ajax implementation of multi-image upload introduction:

In this article, we use an AJAX form to submit a plugin: Jqery.form.js, someone modified a few lines of code and renamed: Jquery.wallform.js, directly used.

Here is to introduce the use of this powerful plug-in, the need for friends can do a reference.

Without refreshing the page, using Php+jquery+ajax to achieve the effect of multi-image upload. The user simply clicks to select the image to upload, and then the image is automatically uploaded to the server and displayed on the page as follows:

One. html code:

Place a form form on the page, use Post to submit to the background PHP handler upload.php, note that the Enctype property is set to support file uploads. #preview用来显示上传完毕后的图片. For more information about CSS style settings, please refer to the source code of the download package.

<formID= "Imageform"Method= "POST"enctype= "Multipart/form-data"Action= "upload.php">  <DivID= "Up_status"style= "Display:none"><imgsrc= "Loader.gif"alt= "Uploading"/></Div>  <DivID= "Up_btn"class= "BTN"> <span>Add a picture</span>    <inputID= "Photoimg"type= "File"name= "Photoimg">  </Div></form><P>100KB maximum, supports jpg,gif,png format.</P><DivID= "Preview"></Div>

Two. jquery Code:

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

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

When you click the button "Add Picture", pop-up Select File dialog box, select the picture you want to upload, trigger the Change event.

The form #imageform then calls the Jquery.wallform.js's 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 image is 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.

$(function(){   $(' #photoimg '). Die (' click '). Live (' Change ',function(){     varStatus = $ ("#up_status"); varBTN = $ ("#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 (); }); });

Three. PHP Code:

upload.php processing image upload, and upload good pictures in the uploads/directory, note that the directory should have write permission.

First, you need to detect whether the post is submitted, then determine whether the picture format, the image size meets the requirements, and then use Move_uploaded_file () to upload the picture, and rename the picture, in the format: Time (). Rand (100,999).

$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 a picture to upload '; Exit; }   $ext= Extend ($name); if(!In_array($ext,$EXTARR)){     Echo' Picture format is wrong! ‘; 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' $path.$image _name.‘" class= "Preview" > "; }  Else{     Echo' On the wrong! ‘; }   Exit; } //get file type suffixfunctionExtend$file _name){   $extend=PathInfo($file _name); $extend=Strtolower($extend["Extension"]); return $extend; }

Original address: http://www.51texiao.cn/jqueryjiaocheng/2015/0525/2456.html

Most primitive: http://www.softwhy.com/forum.php?mod=viewthread&tid=17183

Php+jquery+ajax implementation of multi-image upload Introduction