Php implements simple Upload progress bar and php Upload progress bar _ PHP Tutorial

Php implements simple Upload progress bars and php Upload progress bars. Php implements a simple Upload progress bar. The php Upload progress bar provides three solutions for uploading files on the Web: here I want to use the form method. Set enctyp php for form elements to implement simple Upload progress bar and php Upload progress bar

Three solutions for uploading files on the WebShare with you:

Here I want to useForm method. By setting the enctype = "multipart/form-data" attribute for the form element, the data submitted by the form is submitted in binary encoding, in the Servlet that receives this request, you can obtain the content of the uploaded file by using a binary stream to upload the file.

The enctype attribute of a form element specifies the form data encoding method. this attribute has three values:

Two methods have been found on the Internet: PHP and apc implementation and uploadprogress implementation. what I want to use this time isUploadprogressClick the address to download the dll of the php version. Install php_uploadprogress.dll extension and restart apache.

Progress bar implementation principle:

Here we use an iframe method to upload objects without refreshing.

After the upload is complete

In the preceding HTML code, pay attention to UPLOAD_IDENTIFIER, which is used to locate the file to be viewed. Here I will write it as a 1. you can write it as a random number generated by php. The following is a JS script:

 var proNum=0;   var loop=0;   var progressResult = "";   var interval;   function sendURL() {    $.ajax({     type : 'GET',     url : "getprogress.php",     async : true,     cache : false,     dataType : 'json',    data: "progress_key=" + $('input[name=UPLOAD_IDENTIFIER]').val(),    success : function(e) {      proNum=parseInt(e);      if(e){       $('.barinner').css('width', proNum+"%");      $('#showNum').html(proNum+"%");      setTimeout("getProgress()", 200);         }else{       if(interval == 1){        $('.barinner').css('width', "100%");       $('#showNum').html("100%");      }      }    }    });   }   function getProgress(){    loop++;    sendURL();   }   function startProgress(){    interval = 1;   $('.barinner').css('width', proNum+"%");    $('#showNum').html(proNum+"%");  setTimeout("getProgress()", 500);   }

The content in the getprogress. php file is as follows:

 <?php  if (function_exists("uploadprogress_get_info")) {  $info = uploadprogress_get_info($_GET['progress_key']);  if(!empty($info)){   if(($info['bytes_uploaded'] < $info['bytes_total']) && !empty($info['bytes_uploaded']) && !empty($info['bytes_total'])){    $proNum = floor(($info['bytes_uploaded']/$info['bytes_total'])*100);     }else{    $proNum = 100;   }   echo $proNum;  }else{   echo 0;  } }

After the upload is complete, I show the CSS of the two progress bars, and the second is written with the latest CSS3. Some CSS 3 animation attributes are used.

. Prbar {margin: 5px; width: 500px; background-color: # dddddd; overflow: hidden;/* border effect */border: 1px solid # bbbbbb; -moz-border-radius: 15px; border-radius: 15px;/* Add the shadow effect to the progress bar */-webkit-box-shadow: 0px 2px 4px #555555; -moz-box-shadow: 0px 2px 4px #555555; box-shadow: 0px 2px 4px #555555;}/* No rounded corners for Opera, because the overflow: hidden dont work with rounded corners */doesnotexist:-o-prefocus ,. prbar {border-radius: 0px ;}. prpos {width: 0%; height: 30px; background-color: # 3399ff; border-right: 1px solid # bbbbbb;/* CSS3 progress bar gradient */transition: width 2 s gradient; -webkit-transition: width 0 s transition;-o-transition: width 0 s transition;-moz-transition: width 0 s transition;-ms-transition: width 0 s transition; /* CSS3 Stripes */background-image: linear-gradient (135deg, # 3399ff 25%, #99 ccff 25%, #99 ccff 50%, # 3399ff 50%, # 3399ff 75%, #99 ccff 75%, #99 ccff 100%); background-image:-moz-linear-gradient (135deg, # 3399ff 25%, #99 ccff 25%, #99 ccff 50%, # 3399ff 50%, # 3399ff 75%, #99 ccff 75%, #99 ccff 100%); background-image:-ms-linear-gradient (135deg, # 3399ff 25%, #99 ccff 25%, #99 ccff 50%, # 3399ff 50%, # 3399ff 75%, #99 ccff 75%, #99 ccff 100%); background-image: -o-linear-gradient (135deg, # 3399ff 25%, #99 ccff 25%, #99 ccff 50%, # 3399ff 50%, # 3399ff 75%, #99 ccff 75%, #99 ccff 100%); background-image:-webkit-gradient (linear, 100% 100%, 0 0, color-stop (. 25, #99 ccff), color-stop (. 25, # 3399ff), color-stop (. 5, # 3399ff), color-stop (. 5, #99 ccff), color-stop (. 75, #99 ccff), color-stop (. 75, # 3399ff), color-stop (1, # 3399ff); background-image:-webkit-linear-gradient (135deg, # 3399ff 25%, #99 ccff 25%, #99 ccff 50%, # 3399ff 50%, # 3399ff 75%, #99 ccff 75%, #99 ccff 100%); background-size: 40px 40px;/* Background stripes animation */animation: bganim 3 s linear 2 s infinite;-moz-animation: bganim 3 s linear 2 s infinite;-webkit-animation: bganim 3 s linear 2 s infinite;-o-animation: bganim 3 s linear 2 s infinite;-ms-animation: bganim 3 s linear 2 s infinite;} @ keyframes bganim {from {background-position: 0px ;} to {background-position: 40px ;}@-moz-keyframes bganim {from {background-position: 0px ;}to {background-position: 40px ;}} @-webkit-keyframes bganim {from {background-position: 0px;} to {background-position: 40px; }}@-o-keyframes bganim {from {background-position: 0px ;}to {background-position: 40px ;}@-ms-keyframes bganim {from {background-position: 0px ;}to {background-position: 40px ;}}

The above is all the content of this article, hoping to help you learn.

The following are three solutions for uploading files on the upload Web: The form method is used here. Set enctyp for the form element...