PHP + jQuery + Ajax: Introduction to multiimage upload,

PHP + jQuery + Ajax: Introduction to multiimage upload,

Introduction to multiimage upload using PHP + jQuery + Ajax:

This article uses an Ajax form submission plug-in: jqery. form. js. Someone has modified several lines of code and renamed it jquery. wallform. js.

Next we will introduce the use of this powerful plug-in. If you need it, please refer to it.

Without refreshing a new page, you can use PHP + jQuery + Ajax to upload multiple images. 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, as shown below:

I. HTML code:

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.

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

Ii. jQuery code:

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

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

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

Iii. php code:

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

$ 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 '';} An error occurred while uploading else {echo! ';} Exit;} // obtain the file type suffix function extend ($ file_name) {$ extend = pathinfo ($ file_name ); $ extend = strtolower ($ extend ["extension"]); return $ extend ;}

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

Original: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 17183.