jQuery文件上传不适用于asp.net中继器的每一行

Question

I have attached jquery file upload button in each repeater row but on click file upload selected files display for first row only. 我在每个转发器行都附加了jquery文件上传按钮，但是在单击文件上传时，所选文件仅显示在第一行。 For other rows only total files selected (count)display but progress bar for selected files not display Please help me i am learner in asp.net actually i am front end developer. 对于其他行，仅显示所选文件总数（计数），但不显示所选文件的进度栏。请帮助我，我是asp.net的学习者，实际上我是前端开发人员。 Actually i have to use client side file uploader for multiple files in repeater..My code is as follows: 其实我必须使用客户端文件上传器在转发器中的多个文件。我的代码如下：

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

Answer 1

I think the issue is here: 我认为问题出在这里：

   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('#files') is an ID selector and its attaching to the file inputs properly. document.querySelector（'＃files'）是一个ID选择器，其正确附加到文件的输入。 You should select all of the file inputs using the class name instead like so: 您应该使用类名选择所有文件输入，如下所示：

    var f = document.querySelectorAll('.files');
    for (var i = 0; i < f.length; i++) {
        f[i].addEventListener("change", handleFileSelect, false);
}

jQuery文件上传不适用于asp.net中继器的每一行

问题描述

1 个解决方案

解决方案1
0 2014-12-08 05:28:19

jQuery文件上传不适用于asp.net中继器的每一行

问题描述

1 个解决方案

解决方案1 0 2014-12-08 05:28:19

解决方案1
0 2014-12-08 05:28:19