Question

我正在尝试使用jquery和ajax发布表单，并且我也以这种形式上传文件。我已经动态创建了表单，所以我必须找到单击的表单，然后获取此表单的输入值。

$(document).ready(function () {

    $(".audit-form-btn").click(function (e) {

        e.preventDefault();

        //get the form
        var form = $(this).parent().parent().parent().parent();

        // since we have multiple forms/divs with same class name this is how we determine which form button is clicked by getting button's parent
        // then we'll be able to get exact textbox values of clicked button's form
        var parent = $(this).parent().parent().parent();
        var cpDef = parent.find(".cp-def").val();
        console.log("cpDef:" + cpDef);
        var cpImpSug = parent.find(".cp-imp-sug").val();
        console.log("cpImpSug:" + cpImpSug);
        var cpScore = parent.find(".cp-score").val();
        console.log("cpScore:" + cpScore);
        var cpImg = parent.find(".cp-img");
        console.log("cpImg:" + cpImg);
        var aId = parent.attr('data1');
        console.log("aId:" + aId);
        var cpId = parent.attr('data2');
        console.log("cpId:" + cpId);

        var formData = new FormData();

        formData.append("cpDef", cpDef);
        formData.append("cpImpSug", cpImpSug);
        formData.append("cpScore", cpScore);
        formData.append("aId", aId);
        formData.append("cpId", cpId);

        var totalFiles = cpImg.files.length;
        for (var i = 0; i < totalFiles; i++) {
            var file = cpImg.files[i];
            formData.append("file", file);
        }

        console.log(file);
        console.log(formData);

        $.ajax({
            type: "POST",
            url: "/Audits/AddControlPointValues",
            dataType: "JSON",
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            data: formData,
            success: function (returnArgs) {
                alert(returnArgs.Status);
            },
            error: function (xhr, status, error) {
            }
        });

    });
});

我能够获取所有输入值，但无法获取文件输入值。

var totalFiles = cpImg.files.length;
   for (var i = 0; i < totalFiles; i++) {
      var file = cpImg.files[i];
      formData.append("file", file);
}

获取

无法读取未定义的属性“长度”

上面代码出现

错误。我该如何解决这个问题。任何帮助将不胜感激。

Answer 1

我看到你定义var cpImg = parent.find(".cp-img")，它似乎包含一个html元素。

但是，我没有看到你定义cpImg.files（它似乎是你试图找到其长度的对象）。我误解了你的代码，还是你的错误暗示，它没有被定义？

Answer 2

在阅读刘易斯的回答之后，我已经更新了我的代码，如下所示，它按预期工作

    var totalFiles = cpImg.get(0).files.length;
    for (var i = 0; i < totalFiles; i++) {
        var file = cpImg.get(0).files[i];
        formData.append("file", file);
    }

Answer 3

这是因为您的cpImg是jQuery个对象，而不是input

尝试下一个来源

var totalFiles = cpImg.files.length,
    filesInput = cpImg.get(0);
   for (var i = 0; i < totalFiles; i++) {
      var file = filesInput.files[i];
      formData.append("file", file);
}

Jquery无法读取未定义的属性“长度”

3 个答案: