jQuery / ajax文件上传

Question

Uncaught TypeError: Cannot read property 'length' of undefined

I have 3 file fields, each with its own independent upload button. The problem is that the file field is returned as undefined.

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

You should get the first element of the jQuery find method, it should be like this:

var files = fileSelect[0].files;