three solutions for Web uploaded files are shared:
Here I want to use the form method . By setting the enctype= "Multipart/form-data" attribute for the form element, allowing the form to submit data to be submitted in binary encoding, the content of the uploaded file can be obtained by using the binary stream in the servlet receiving the request, which enables the upload of the file.
The Enctype property of the form element specifies how the form data is encoded, with 3 values:
Found in the online two ways, PHP with APC implementation and use of uploadprogress implementation, this time I want to use the uploadprogress, click the address can be downloaded to the corresponding version of PHP DLL. Install the Php_uploadprogress.dll extension and restart Apache.
Progress bar Implementation principle:
Here is a way to use an IFRAME without refreshing the upload file.
After the upload is completed as shown:
<body>
<div style= "padding:20px" >
<form action= "action.php" enctype= "Multipart/form-data" Method= "POST" target= "Iframeupload" > <iframe name= "iframeupload" width= "height=" "frameborder= '
1 ' ></iframe>
<input type= "hidden" name= "Upload_identifier" value= "1"/> <input "id="
Name= "File1" type= "file"/> <input value= "upload" type= "
submit" onclick= "startprogress ()"/>
</form >
</div>
<div style= "width:500px height:20px;border:1px solid Red" >
<div style= " position:relative; height:20px; Background-color:purple; width:0% "class=" Barinner "></div>
</div>
<div id= ' shownum ' ></div>
<div class= "Prbar" >
<div class= "Prpos barinner" ></div>
</div>
</body >
The above HTML code should be noted below Upload_identifier, which is used to locate the file to see which upload progress. I'm writing here to die for a 1, you can write a random number of PHP generated. 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,< C10/>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 ()");
The following are the contents of 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 two CSS for the progress bar, and the second one was written with the latest CSS3. Some CSS3 animation properties were 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 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-PREFOCU
S,. 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 {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 the entire content of this article, I hope to help you learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
