javascript - Jquery/ajax文件上传

Question

未捕获类型错误:无法读取未定义的属性“长度”

我有 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 find 方法的第一个元素，它应该是这样的:

var files = fileSelect[0].files;