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