Example of uploading PHP + Ajax without refreshing progress bar,

Example of uploading PHP + Ajax without refreshing progress bar,

Project requirements: 1.php + Ajax without refreshing progress bar Image Upload; 2. progress bar. Required plug-ins: jquery. js and jquery. form. js.

Recently, I am working on a mobile web project and need to use Ajax to upload images. The project requires PHP to upload images without refreshing any new ones and to bring progress bars. Next I will discuss my implementation methods first.

In this example, jquery. js, jquery. form. js are required. The demo contains a package, which can be downloaded at the bottom of the article.

Step 1: Create the front-end page index.html

This section is the front-end display content. It must be noted that the input: file label is not very beautiful, so I have hidden it. Use the tag. uploadbtn to call the click Event of the file tag to open and select a file.

Note: During file upload, the form attribute enctype must be set to multipart/form-data.

<! Doctype html> 
Step 2: Ajax submission
This part is the Ajax Submission Part. The process is as follows:

 
 
 
  
The progress bar is displayed through the beforeSend callback function at the start of submission. The width of the progress bar is 0%, and the Progress value is 0%;
 
 
  
During the upload process, the data returned by the uploadProgress callback function is used to change the width and progress value of the progress bar.
 
 
  
After the upload is successful, use the success callback function to output the uploaded data information (image name, size, address, etc.) and output the image to the page for preview.
 
 
  
Of course, if it fails, there is an error callback function to help you with 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', // the data format is json beforeSend: function () {// start to upload progress. show (); var percentVal = '0% '; progress_bar.width (percentVal); percent.html (percentVal) ;}, uploadProgress: function (event, position, total, percentComplete) {var percentVal = percentComplete + '%'; // obtain progress progress_bar.width (percentVal); // increase the width of the upload progress bar by percent.html (percentVal); // display the upload progress percentage}, success: function (data) {if (data. status = 1) {var src = data. url; var attstr = ''; $ (". imglist "). append (attstr); $ (". res "pai.html (" Upload image "+ data. name + "success, image size:" + data. size + "K, file address:" + data. url);} else {$ (". res "pai.html (data. content);} progress. hide () ;}, error: function (xhr) {// Upload Failed alert ("Upload Failed"); progress. hide () ;}}) ;}); </script>
Step 3: backend PHP code upload. php
The backend processing code is PHP file upload, but some judgment needs to be made during the upload, such as the file format and file size.
Note: The above ajax return format is json, so the image json code must be correctly formatted; otherwise, the upload will fail.
$ Picname = $ _ FILES ['uploadfile'] ['name']; $ picsize = $ _ FILES ['uploadfile'] ['SIZE']; if ($ picname! = "") {If ($ picsize> 2014000) {// restrict the upload size echo '{"status": 0, "content ": "The image size cannot exceed 2 MB"} '; exit;} $ type = strstr ($ picname ,'. '); // restrict the upload format if ($ type! = ". Gif" & $ type! = ". Jpg" & $ type! = "Png") {echo '{"status": 2, "content": "The image format is incorrect! "} '; Exit;} $ rand = rand (100,999); $ pics = uniqid (). $ type; // name the image. // upload path $ pic_path = "images /". $ pics; move_uploaded_file ($ _ FILES ['uploadfile'] ['tmp _ name'], $ pic_path);} $ size = round ($ picsize/, 2 ); // convert to kb echo '{"status": 1, "name ":"'. $ picname. '"," url ":"'. $ pic_path. '"," size ":"'. $ size. '"," content ":" uploaded successfully "}';
Demo download: php-ajax-upload_jb51.rar

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.