Jquery/ajax file upload

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

您应该获得jQuery find方法的第一个元素，它应该像这样：

var files = fileSelect[0].files;

Answer 2

It seems like you are trying to upload without the use of any direct association between the file field and the button or image( whatever imgAction references). If the two are adjacent elements, then you may need to trigger the upload event.

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

check out the jquery click docs