PHP implementation of a simple upload progress bar, PHP upload progress bar _php Tutorial

Source: Internet
Author: User
Tags php upload progress bar

PHP implementation of a simple upload progress bar, PHP upload progress bar


three solutions for uploading files to the Web are shared with you:

What I'm going to use here is the form method . By setting the Enctype= "Multipart/form-data" property for the form element, the data submitted by the form is submitted in binary encoding, the content of the uploaded file can be obtained by using the binary stream in the servlet receiving the request, thus uploading the file.

The Enctype property of the form element specifies how the form data is encoded, which has 3 values:

Found on the Internet two ways, PHP with APC implementation and use Uploadprogress implementation, this time I want to use the uploadprogress, click the address can be downloaded to php corresponding version of the DLL. Install the Php_uploadprogress.dll extension and restart Apache.

Progress bar Implementation principle:

Here is a way to upload a file without a flush in an IFRAME.

What it looks like when the upload is complete

                         

The above HTML code to pay attention to the next upload_identifier, which is used to locate the file to see which upload progress. I'm going to write a death here for a 1, you can write a random number generated by PHP. Here is the 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 ()", +);         } 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 ()", +);   

Here's what's in the getprogress.php file:

<?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 = +;   }   echo $proNum;  } Else{   echo 0;}  }

After uploading, I showed the CSS of the two progress bars, and the second was written with the latest CSS3. Used some of the animated properties of the CSS3.


 . prbar {margin:5px;  width:500px;  Background-color: #dddddd;    Overflow:hidden;  /* Border effect */border:1px solid #bbbbbb;  -moz-border-radius:15px;      border-radius:15px;  /* Add shadow effect to 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 2s ease;  -webkit-transition:width 0s ease;  -o-transition:width 0s ease;  -moz-transition:width 0s ease;  -ms-transition:width 0s ease; /* CSS3 stripes */background-image:linear-gradient (135deg, #3399ff 25%, #99ccff 25%, #99ccff 50%, #3399ff 50%, #3399ff 75%  , #99ccff 75%, #99ccff 100%); Background-image:-moz-linear-gradient (135deg, #3399ff 25%, #99ccff 25%, #99ccff 50%, #3399ff 50%, #3399ff 75%, #99CCFF 75%, #99ccff 100%); Background-image:-ms-linear-gradient (135deg, #3399ff 25%, #99ccff 25%, #99ccff 50%, #3399ff 50%, #3399ff 75%, #99ccff 75%,  #99ccff 100%); Background-image:-o-linear-gradient (135deg, #3399ff 25%, #99ccff 25%, #99ccff 50%, #3399ff 50%, #3399ff 75%, #99ccff 75%,#  99CCFF 100%); Background-image:-webkit-gradient (linear, 100% 100%, 0 0,color-stop (. #99ccff), Color-stop (. #3399ff), Color-stop (. 5, #3399ff), Color-stop (. 5, #99ccff), Color-stop (. #99ccff), Color-stop (., #3399ff), Color-stop (1, #  3399FF)); Background-image:-webkit-linear-gradient (135deg, #3399ff 25%, #99ccff 25%, #99ccff 50%, #3399ff 50%, #3399ff 75%, #99ccff  75%, #99ccff 100%);  background-size:40px 40px;  /* Background Stripes animation */animation:bganim 3s linear 2s infinite;  -moz-animation:bganim 3s linear 2s infinite;  -webkit-animation:bganim 3s linear 2s infinite;  -o-animation:bganim 3s linear 2s infinite; -ms-animation:bganim 3s linear 2s 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 {f Rom {background-position:0px;} to {background-position:40px;}} @-o-keyframes Bganim {from {background-position:0px,} to {background-position:40px,}} @-ms-keyframes Bganim {from {b ackground-position:0px;} to {background-position:40px;}}

The above is the whole content of this article, I hope that everyone's study has helped.

http://www.bkjia.com/PHPjc/1072547.html www.bkjia.com true http://www.bkjia.com/PHPjc/1072547.html techarticle PHP Implementation of a simple upload progress bar, PHP upload progress bar Web upload file Three kinds of solutions to share to everyone: here I want to use the form method. By setting Enctyp for form elements ...

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