Javascript Jquery文件上载不适用于每行asp.net转发器_Javascript_Jquery_Asp.net

Javascript Jquery文件上载不适用于每行asp.net转发器

javascript jquery asp.net

Javascript Jquery文件上载不适用于每行asp.net转发器,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,我在每个转发器行中都附加了jquery文件上载按钮，但单击“文件上载”时，所选文件仅显示第一行。对于其他行，仅显示所选文件总数（计数），但未显示所选文件的进度条。请帮助我，我是asp.net中的学习者，实际上我是前端开发人员。实际上，我必须在repeater中为多个文件使用客户端文件上载程序。我的代码如下： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

我在每个转发器行中都附加了jquery文件上载按钮，但单击“文件上载”时，所选文件仅显示第一行。对于其他行，仅显示所选文件总数（计数），但未显示所选文件的进度条。请帮助我，我是asp.net中的学习者，实际上我是前端开发人员。实际上，我必须在repeater中为多个文件使用客户端文件上载程序。我的代码如下：

 <%@ 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>


.a{
显示：无；
}
.输入{
显示：无；
利润上限：-17px；
左边距：176像素；
宽度：34px；
}
.按钮{
背景：#25A6E1；
背景：-moz线性梯度（顶部，#25A6E1 0%，#188BC0 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#25A6E1）、颜色停止（100%，#188BC0））；
背景：-webkit线性梯度（顶部，#25A6E1 0%，#188BC0 100%）；
背景：-o-线性梯度（顶部，#25A6E1 0%，#188BC0 100%）；
背景：-ms线性梯度（顶部，#25A6E1 0%，#188BC0 100%）；
背景：线性梯度（顶部，#25A6E1 0%，#188BC0 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#25A6E1'，endColorstr='#188BC0'，GradientType=0）；
填充：8px 13px；
颜色：#fff；
字体系列：'Helvetica Neue'，无衬线；
字号：17px；
边界半径：4px；
-moz边界半径：4px；
-webkit边界半径：4px；
边框：1px实心#1A87B9；
宽度：227px！重要；
}   
var selDiv=“”；
var-updateProcessInterval；
var updateTextBoxInterval；
document.addEventListener（“DOMContentLoaded”，init，false）；
函数init（）{
//var classname=document.getElementsByClassName（“文件”）；
//警报（类名）；
//document.querySelector（“#files”）.addEventListener（'change'，handleFileSelect，false）；
var f=document.querySelectorAll（'.files'）；
//警报（f）；
对于（变量i=0；i100）{//如果该部分添加，请参见
clearInterval（updateProcessInterval）；
}
p、 value=a；//警报（p.value）；
}
}
函数updatetextbox（）{
var textt=document.getElementsByClassName（'input'）；
//警报（textt.length）；//此文档中的任何警报都显示正确的值，但不显示n次
对于（变量i=0；i100）{
clearInterval（updateTextBoxInterval）；
回来
}else如果（！（parseInt（c）<0 | | isNaN（c）））{
tt.value=c+“%”；
}
}
}

我认为问题在于：

   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);
                 }*/
             }

函数init（）{
//var classname=document.getElementsByClassName（“文件”）；
//警报（类名）；
document.querySelector（“#files”）.addEventListener（'change'，handleFileSelect，false）；
/*对于（var i=0；i


querySelector（“#files”）是一个ID选择器，它可以正确地附加到文件输入。您应该使用类名选择所有文件输入，如下所示：
    var f = document.querySelectorAll('.files');
    for (var i = 0; i < f.length; i++) {
        f[i].addEventListener("change", handleFileSelect, false);
}   

var f=document.querySelectorAll（'.files'）；
（弗吉尼亚州）