我在每个转发器行中附加了jquery文件上传按钮，但是单击文件上传所选文件仅显示第一行。对于其他行，只显示所选的总文件数（计数），但所选文件的进度条不显示请帮助我，我在asp.net学习，实际上我是前端开发人员。实际上我必须在转发器中使用客户端文件上传器来处理多个文件。我的代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery.min.js" type="text/javascript"></script>
<style>
.a{
display:none;
}
.input{
display:none;
margin-top: -17px;
margin-left: 176px;
width:34px;
}
.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>
<script>
var selDiv = "";
var updateProcessInterval;
var updateTextBoxInterval;
document.addEventListener("DOMContentLoaded", init, false);
function init() {
// var classname = document.getElementsByClassName("files");
// alert(classname);
// document.querySelector('#files').addEventListener('change', handleFileSelect, false);
var f = document.querySelectorAll('.files');
// alert(f);
for (var i = 0; i < f.length; i++) {
//alert("jdj");
//alert(f.length);
f[i].addEventListener("change", handleFileSelect, false);
//alert(f[i]);
/* for (var i = 0; i < classname.length; i++) {
alert(classname.length);
classname[i].addEventListener('change', handleFileSelect, false);
}*/
// $('.files').on("change", function(){ handleFileSelect(); });
}
}
function handleFileSelect(e) {
if (!e.target.files) return;
var files = e.target.files;
// alert(files);
for (var i = 1; i < files.length; i++) {
var progress = document.createElement("progress");
progress.setAttribute('class', 'a');
progress.setAttribute('id', 'i');
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', '0%');
text.setAttribute('max', '100%');
filename.setAttribute('class', 'filename');
$('.prrogress-wp').append(filename);
$('.progress-wpr').append(progress);
$('.progress-wpr').append(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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource2">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<table id="gg">
<tr class="ff">
<td>
<input type="file" class="button files" id="files" name="files" onchange="handleFileSelect(this)" multiple><br/>
<div id="progress-wpr" class="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" >
</td></tr></table>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource2" runat="server"
ConnectionString="<%$ ConnectionStrings:countryConnectionString %>"
SelectCommand="SELECT * FROM [countries]"></asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:Students1ConnectionString %>"
SelectCommand="SELECT * FROM [Students]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
答案 0 :(得分：0)
我认为问题在于：
function init() {
// var classname = document.getElementsByClassName("files");
// alert(classname);
document.querySelector('#files').addEventListener('change', handleFileSelect, false);
/* for (var i = 0; i < classname.length; i++) {
alert(classname.length);
classname[i].addEventListener('change', handleFileSelect, false);
}*/
}
document.querySelector（＆＃39; #ciles＆＃39;）是一个ID选择器，它附加到文件输入正确。您应该使用类名选择所有文件输入，如下所示：
var f = document.querySelectorAll('.files');
for (var i = 0; i < f.length; i++) {
f[i].addEventListener("change", handleFileSelect, false);
}