Php+ajax no refresh with progress bar picture upload Example

This article mainly introduces the Php+ajax no refresh with progress bar image Upload example, a detailed collation of PHP without refreshing upload pictures, and to bring the code of the progress bar, there is a need to understand.

Project requirements: 1. Php+ajax no refresh with progress bar picture upload, 2. With a progress bar. Required plugins: Jquery.js,jquery.form.js.

Recently in a mobile phone Web project, need to use the Ajax upload work picture can, the project requires PHP to upload images without a refresh, and to bring a progress bar, the following is a look at my implementation method, first see

This example needs to use the Jquery.js,jquery.form.js,demo contains, you can download under the article.

The first step is to set up the front page index.html

This paragraph is the front-end display content, here need to explain is because the Input:file label display is not very beautiful, so I hide it. Instead, use an A-label. Uploadbtn to invoke the file tag's click event, which opens and selects files.

Note: When uploading a file, the form's property enctype must be set to: Multipart/form-data

<! DOCTYPE html>


The second step, the AJAX submission section

This part is the Ajax commit part, the process is as follows:


 

 
  
 
   
The progress bar is displayed with a progress bar width of 0% and a progress value of 0% at the beginning of the commit through the Beforesend callback function setting.
 
   
Change the width and progress value of the progress bar during the upload process by uploadprogress the data returned in real time by the callback function.
 
   
After the upload is successful, the output of the success callback function is uploaded to the data information (image name, size, address, etc.) and the image is previewed on the page.
 
   
Of course, if it fails, there is an error callback function that helps you to do the height.
 
  

 


<script type= "Text/javascript" >$ (document). Ready (function (e) {var progress = $ (". Progress"); var Progress_bar = $ (". Progress-bar"); var percent = $ ('. percent '); $ ("#uploadphoto"). Change (function () {$ ("#myupload"). Ajaxsubmit ({dataType: ' json ',//Data format is JSON beforesend:function ( {//Start uploading progress.show (); var percentval = ' 0% '; progress_bar.width (percentval); percent.html (percentval);}, UploadPr Ogress:function (event, Position, total, percentcomplete) {var percentval = percentcomplete + '% ';//Get Progress Progress_bar. Width (percentval); Upload progress bar width widened percent.html (percentval);  Show upload Progress Percentage}, Success:function (data) {if (data.status = = 1) {var src = data.url;  var attstr= '  '; $ (". Imglist"). Append (ATTSTR); $ (". Res"). html ("Upload picture" +data.name+ "success, picture size:" +data.size+ "K, file Address:" +data.url ");  }else{$ (". Res"). HTML (data.content);} progress.hide ();  }, Error:function (XHR) {//Upload failed alert ("Upload failed");  Progress.hide ();  }  }); }); });</script>


Step three, back-end PHP code upload.php

Back-end processing code, is php file upload, but upload the time need to do some judgment, such as file format, file size.

Note: I above the AJAX return format is JSON, so in the image JSON code is must be correct specification, otherwise there will be an unsuccessful upload prompt.



$picname = $_files[' uploadfile ' [' name '];  $picsize = $_files[' UploadFile ' [' size '];  if ($picname! = "") {  if ($picsize > 2014000) {//Limit upload size  echo ' {"status": 0, "Content": "Picture size cannot exceed 2M"} '; exit;
  
   }  $type = Strstr ($picname, '. ');//Limit upload format  if ($type! = ". gif" && $type! = ". jpg" && $type! = "png {echo ' {' status ': 2, ' content ': ' The picture is not in the right format! "}'; Exit;  } $rand = rand (999);  $pics = Uniqid (). $type; Named picture name  //upload path  $pic _path = "images/". $pics;  Move_uploaded_file ($_files[' uploadfile ' [' tmp_name '], $pic _path);  }  $size = round ($picsize/1024,2); Convert to KB  echo ' {status ': 1, ' name ': ' '. $picname. ', ' url ': '. $pic _path. ' "," Size ":" '. $size. ' "," content ":" Upload succeeded "} ';
  


Demo Download: Php-ajax-upload_jb51.rar

The above is the whole content of this article, I hope that everyone's learning has helped, but also hope that we support topic.alibabacloud.com.