JQuery ajax文件上傳到ASP.NET與輸入文件

Question

我想實現與ASP.NET和jQuery的文件上傳功能。我使用輸入文件控制，並在我的頁面中有7個。該頁面是帶有母版頁的ASPX頁面。這是我的代碼;

ASPX：

<div class="form-group"> 
    <asp:Label runat="server" AssociatedControlID="file1" CssClass="col-md-3 control-label">File 1</asp:Label> 
    <div class="col-md-9"> 
     <input type="file" id="file1" runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi"> 
    </div> 

</div> 

<div class="form-group"> 
    <asp:Label runat="server" AssociatedControlID="file2" CssClass="col-md-3 control-label">File 2</asp:Label> 
    <div class="col-md-9"> 
     <input type="file" id="file2" runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi"> 
    </div> 

</div> 

的JavaScript：

$(document).ready(function() { 
    $("#btnUpload").click(function (event) { 
     var file1 = $("#<%=file1.ClientID %>").files[0]; 
     var file2 = $("#<%=file2.ClientID %>").files[0]; 

     var files = [file1, file2]; 

     if (files.length > 0) { 
      var formData = new FormData(); 
      for (var i = 0; i < files.length; i++) { 
       formData.append(files[i].name, files[i]); 
      } 

      var progressbarLabel = $('#progressBar-label'); 
      var progressbarDiv = $('#progressbar'); 

      $.ajax({ 
       url: '../Util/UploadHandler.ashx', 
       method: 'post', 
       data: formData, 
       contentType: false, 
       processData: false, 
       success: function() { 
        progressbarLabel.text('Complete'); 
        progressbarDiv.fadeOut(2000); 
       }, 
       error: function (err) { 
        alert(err.statusText); 
       } 
      }); 

      progressbarLabel.text('Uploading...'); 
      progressbarDiv.progressbar({ 
       value: false 
      }).fadeIn(500); 
     } 
    }); 
}); 

我有錯誤，當我按下上傳按鈕，指出file1是undefined。

我也試過

var file1 = $("#file1").files[0]; 

和file1是undefined一次。

如何在JavaScript代碼中獲得file1？

Answer 1

你需要從DOM對象，而不是訪問files從jQuery對象。

var file1 = $("#<%=file1.ClientID %>").get(0).files[0]; 
var file2 = $("#<%=file2.ClientID %>").get(0).files[0]; 

你或許應該同時檢查，如果files實際上有文件，是不是空的。

Answer 2

如果您具有runat = server屬性，則ASP.NET會將一串字符附加到您的標識的末尾。如果你不直接在你的服務器端代碼中訪問DOM元素（反正你永遠不應該這樣做）。

Answer 3

嘗試增加multiple您輸入元素...

<div class="form-group"> 
    <asp:Label runat="server" AssociatedControlID="file1" CssClass="col-md-3 control-label">File 1</asp:Label> 
    <div class="col-md-9"> 
     <input type="file" id="file1" runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi" multiple> 
    </div> 

</div> 

<div class="form-group"> 
    <asp:Label runat="server" AssociatedControlID="file2" CssClass="col-md-3 control-label">File 2</asp:Label> 
    <div class="col-md-9"> 
     <input type="file" id="file2" runat="server" class="filestyle" data-icon="false" data-buttonbefore="true" data-buttontext="Dosya Seç" data-placeholder="Dosya Seçilmedi" multiple> 
    </div> 

</div>