Загрузка файла 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 снова.

Как я могу получить file1 в JavaScript-коде?

Answer 1

Вы должны получить доступ к files из объекта DOM, а не от объекта JQuery.

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

Вы, вероятно, следует также проверить, если files на самом деле имеет файлы и не пусто.

Answer 2

ASP.NET добавит кучу символов в конец вашего идентификатора, если у вас есть атрибут runat = server. Если вы не получаете доступ к элементу 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>