单击浏览按钮时，多个文件被选中并显示多个进度条，但只有第一个文本框的值变为 100%，而其他文本框值保持不变。我的代码如下:
<!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.
最佳答案
问题出在这个 for 语句中:
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;
}
当它到达 return 语句时，函数结束并且永远不会到达 for 循环中的下一个元素，因此只添加 for 中的第一个元素。
此外，当您使用函数 setInterVal() 时，您还必须使用 clearInterval() 来防止函数运行并运行直到窗口关闭，我给您留了一个代码示例以及应用的更正供您尝试。
<!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.
关于javascript - 使用 jquery、javascript 和 html 在单击浏览按钮上显示带有进度条的文本框中的文件上传百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27263961/