Display the file upload percentage in text box with progress bar on click browse button using jquery,javascript and html
Question
On click browse button multiple files selected and multiple progress bar display but the value of only first textbox goes to 100% while other textbox values remain static.My code is as follows:
<!doctype html>
<html>
<head>
<title></title>
<style>
.a{
display:none;
}
.input{
display:none;
}
.button {
background: #25A6E1;
background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9;
width:227px !important;
}
</style>
</head>
<body>
<form id="myForm" method="post" enctype="multipart/form-data">
<input type="file" class="button" id="files" name="files" multiple><br/>
<div id="progress-wpr">
<div class="filename"></div>
<progress class='a' max=100 value=0></progress>
<input type="text" value="0" class="input" max="100" />
</div>
<input type="submit" value="Upload" class="button" style="margin-top:56px;width:77px !important" >
</form>
<script>
var selDiv = "";
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('#files').addEventListener('change', handleFileSelect, false);
}
function handleFileSelect(e) {
if(!e.target.files) return;
var files = e.target.files;
for(var i=1; i<files.length; i++) {
var progress = document.createElement("progress");
progress.setAttribute('class','a');
progress.setAttribute('max','100');
progress.setAttribute('value','0');
var filename = document.createElement("div");
var text=document.createElement("input");
text.setAttribute('class','input');
text.setAttribute('value','10');
text.setAttribute('max','100');
filename.setAttribute('class','filename');
document.getElementById('progress-wpr').appendChild(filename);
document.getElementById('progress-wpr').appendChild(progress);
document.getElementById('progress-wpr').appendChild(text);
}
var elements = document.getElementsByClassName('a');
var filename = document.getElementsByClassName('filename');
var textname = document.getElementsByClassName('input');
for(var i=0; i<files.length; i++) {
var f = files[i];
var p=elements[i];
var t=textname[i];
filename[i].innerHTML = f.name;
p.style.display='block';
t.style.display='block';
setInterval(update_progress, 1500);
setInterval(updatetextbox, 1500);
}
}
function update_progress(){
var elements = document.getElementsByClassName('a');
for(var i=0; i<elements.length; i++) {
var p=elements[i];
var a=p.value;
a=a+10; //alert(a)// infinite number of times sum
if(a==110) //if this part add then see
break;
p.value=a; //alert(p.value);
}
}
function updatetextbox(){
var textt=document.getElementsByClassName('input');
//alert(textt.length); //any alert in this doc display right value but n no times
for(var i=0; i<textt.length; i++) {
var tt=textt[i];
alert(textt[i]);
var a=tt.value;
c=parseInt(a)+parseInt("10");
if(parseInt(c) < 0 || isNaN(c))
return 0;
else if(parseInt(c) > 100)
return tt.value=100;
else return tt.value=c;
}
}
</script>
</body>
</html>
I have to display the file upload percentage in a textbox with progress bar.
1 answers
solution1
0 ACCPTED 2014-12-03 05:41:47
The problem is inside this for statement:
for(var i=0; i<textt.length; i++) {
var tt=textt[i];
alert(textt[i]);
var a=tt.value;
c=parseInt(a)+parseInt("10");
if(parseInt(c) < 0 || isNaN(c))
return 0; // <---------------------------- here
else if(parseInt(c) > 100)
return tt.value=100;
else return tt.value=c;
}
When it reach the return statement the function ends and the next item on the for loop is never reached so only the first element in the for is added.
Also when you use the function setInterVal() you must also use clearInterval() to prevent the function going and going unitil the window is closed, i leave you an example of your code with the applied corrections for you to try them.
<!doctype html>
<html>
<head>
<title></title>
<style>
.a{
display:none;
}
.input{
display:none;
}
.button {
background: #25A6E1;
background: -moz-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#25A6E1),color-stop(100%,#188BC0));
background: -webkit-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -o-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: -ms-linear-gradient(top,#25A6E1 0%,#188BC0 100%);
background: linear-gradient(top,#25A6E1 0%,#188BC0 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);
padding:8px 13px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:17px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #1A87B9;
width:227px !important;
}
</style>
</head>
<body>
<form id="myForm" method="post" enctype="multipart/form-data">
<input type="file" class="button" id="files" name="files" multiple><br/>
<div id="progress-wpr">
<div class="filename"></div>
<progress class='a' max=100 value=0></progress>
<input type="text" value="0" class="input" max="100" />
</div>
<input type="submit" value="Upload" class="button" style="margin-top:56px;width:77px !important" >
</form>
<script>
var selDiv = "";
var updateProcessInterval;
var updateTextBoxInterval;
document.addEventListener("DOMContentLoaded", init, false);
function init() {
document.querySelector('#files').addEventListener('change', handleFileSelect, false);
}
function handleFileSelect(e) {
if(!e.target.files) return;
var files = e.target.files;
for(var i=1; i<files.length; i++) {
var progress = document.createElement("progress");
progress.setAttribute('class','a');
progress.setAttribute('max','100');
progress.setAttribute('value','0');
var filename = document.createElement("div");
var text=document.createElement("input");
text.setAttribute('class','input');
text.setAttribute('value','10');
text.setAttribute('max','100');
filename.setAttribute('class','filename');
document.getElementById('progress-wpr').appendChild(filename);
document.getElementById('progress-wpr').appendChild(progress);
document.getElementById('progress-wpr').appendChild(text);
}
var elements = document.getElementsByClassName('a');
var filename = document.getElementsByClassName('filename');
var textname = document.getElementsByClassName('input');
for(var i=0; i<files.length; i++) {
var f = files[i];
var p=elements[i];
var t=textname[i];
filename[i].innerHTML = f.name;
p.style.display='block';
t.style.display='block';
updateProcessInterval = setInterval(update_progress, 1500);
updateTextBoxInterval = setInterval(updatetextbox, 1500);
}
}
function update_progress(){
var elements = document.getElementsByClassName('a');
for(var i=0; i<elements.length; i++) {
var p=elements[i];
var a=p.value;
a=a+10; //alert(a)// infinite number of times sum
if(a>100){ //if this part add then see
clearInterval(updateProcessInterval);
}
p.value=a; //alert(p.value);
}
}
function updatetextbox(){
var textt=document.getElementsByClassName('input');
//alert(textt.length); //any alert in this doc display right value but n no times
for(var i=0; i<textt.length; i++) {
var tt=textt[i];
//alert(textt[i]);
var a=tt.value;
c=parseInt(a)+parseInt("10");
if(parseInt(c) > 100) {
clearInterval(updateTextBoxInterval);
return;
} else if(!(parseInt(c) < 0 || isNaN(c))){
tt.value=c;
}
}
}
</script>
</body>
</html>
I have to display the file upload percentage in a textbox with progress bar.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Get the file name after click open button in file browse dialog box using JavaScript/jQuery
Display progress bar percentage using jquery
Display multiple progress bar with multiple file upload using jquery,html and css
Show File Upload Progress Bar without click Submit Button
jQuery Progress Bar for File Upload
Display percentage value of progress bar during AJAX upload
Read and display the text file contents upon click of button using Javascript
Using the file name captured with the html browse button in javascript
progress bar for Multiple file upload using Html5
PHP Multiple File Upload with Progress Bar Not Working using JSON and Javascript
Related Tags