[英]Get the file name after click open button in file browse dialog box using JavaScript/jQuery
[英]Display the file upload percentage in text box with progress bar on click browse button using jquery,javascript and html
在单击浏览按钮时,选择了多个文件并显示了多个进度条,但是只有第一个文本框的值变为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.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.