2014-12-08 177 views
1

我已附加jquery文件上傳按鈕在每個中繼器行,但點擊文件上傳選定的文件只顯示第一行。對於其他行只有總文件選擇(計數)顯示,但選定的文件進度條不顯示請幫助我,我在asp.net學習者,實際上我是前端開發人員。其實我已經使用客戶端文件上傳在repeater..My代碼多個文件如下: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

我認爲這個問題是在這裏:

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('#文件')是一個ID選擇器,並正確連接到文件輸入。你應該使用類名選擇所有的文件輸入,而不是像這樣:

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

我已經在querySelector但在運行時錯誤使用類名稱:遺漏的類型錯誤:無法讀取屬性空的「的addEventListener」 – garima 2014-12-08 05:46:10

+0

嘗試jQuery添加事件監聽器的方式: $('。files')。on(「change」,function(){handleFileSelect();}); 如果這項工作,然後我會更新答案。 – mga911 2014-12-08 05:56:39

+0

現在錯誤未到,但功能handleFileSelect()不需要任何中繼器行。進度條不顯示任何行。 – garima 2014-12-08 06:00:58