Jquery/Ajax файл загрузить

Question

неперехваченного TypeError: Не удается прочитать свойство «длину» неопределенного

У меня есть 3 поля файлов, каждые со своей собственной независимой кнопкой загрузки. Проблема в том, что поле файла возвращается как неопределенное.

JavaScript:

$('.imgAction').on('click', function() { 

    event.stopPropagation(); // Stop stuff happening 
    event.preventDefault(); // Totally stop stuff happening 
    var imgID = $(this).attr('data-id'); 
    var fileSelect = $(this).closest('div').find('input[type=file]'); 

    var files = fileSelect.files; 

    if (files.length > 0) { 
     if (window.FormData !== undefined) { 
      var data = new FormData(); 
      for (var x = 0; x < files.length; x++) { 
       data.append("file" + x, files[x]); 
      } 

      $.ajax({ 
       type: "POST", 
       url: '/AdminPanel/Catalog/ImgUpload/' + @Model.productID + "/" + imgID, 
       contentType: false, 
       processData: false, 
       data: data, 
       success: function (result) { 
        console.log(result); 
       }, 
       error: function (xhr, status, p3, p4) { 
        var err = "Error " + " " + status + " " + p3 + " " + p4; 
        if (xhr.responseText && xhr.responseText[0] == "{") 
         err = JSON.parse(xhr.responseText).Message; 
        console.log(err); 
       } 
      }); 
     } else { 
      alert("This browser doesn't support HTML5 file uploads!"); 
     } 
    } 
}); 

HTML

<div> 
@if (Model.productType == 1) 
{ 
    string imgPath1 = "assets/img/catalog/phones/" + @Model.Make + "-" + @Model.Model + "-" + @Model.carrier1 + "-1.jpg"; 
    string imgPath2 = "assets/img/catalog/phones/" + @Model.Make + "-" + @Model.Model + "-" + @Model.carrier1 + "-2.jpg"; 
    string imgPath3 = "assets/img/catalog/phones/" + @Model.Make + "-" + @Model.Model + "-" + @Model.carrier1 + "-3.jpg"; 

    <div style="width: 20%;float: left;"> 
" 
     <img width="200" id="img1" src="~/@imgPath1" /> 
     <input type="file" class="imgFile" /> 
     <a href="#" class="imgAction" data-id="1">UPLOAD</a> 
    </div> 
    <div style="width: 20%;float: left;"> 
     <img width="200" id="img2" src="~/@imgPath2" /> 
     <input type="file" class="imgFile" /> 
     <a href="#" class="imgAction" data-id="2">UPLOAD</a> 
    </div> 
    <div style="width: 20%;float: left;"> 
     <img width="200" id="img3" src="~/@imgPath3" /> 
     <input type="file" class="imgFile"/> 
     <a href="#" class="imgAction" data-id="3" >UPLOAD</a> 
    </div> 
} 
</div> 

Answer 1

Вы должны получить первый элемент JQuery найти метод, он должен быть таким:

var files = fileSelect[0].files; 

Answer 2

Это кажется, что вы пытаются загрузить без использования какой-либо прямой связи между полем файла и кнопкой или изображением (wh навсегда ссылки на imgAction). Если эти два являются смежными элементами, вам может потребоваться инициировать событие загрузки.

var fileSelect = $(this).closest('div').find('input[type=file]').click()

ЗАКАНЧИВАТЬ jquery click docs