Example of uploading PHP + Ajax without refreshing progress bar,

Source: Internet
Author: User
Tags php file upload

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.

Related Article

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.