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

Source: Internet
Author: User
Tags jquery library

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

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.