Javascript 将多个文件发送到JS对象并准备Ajax post

检查下面的代码。在这里，我试图将文件插入js对象，然后发送到后端mvc5控制器进行进一步处理。但问题是，当我触发

#btn HighlightUpdate

单击jquery时，控制台中会抛出错误：jquery-3.3.1.js:8463未捕获类型错误：非法调用。如何修复它并准备通过ajax post发送？特别是，请检查我是否在

var file=$（this.find（“.hpicFile”）行向对象插入了正确的值；data.push（{Img:file}）

Html:

您可以使用to
$.ajax
to和type
POST
将数据发送到控制器

我已经修复了您的代码，它需要一个用于存储我们正在动态添加的所有
文件
（img）。我们可以将找到的img附加到formData中，并将formData发送给控制器进行进一步处理

无需要使用
数组
将
img推入。您可以在前端和控制器中获取我们正在发送的所有文件，并将它们附加到
formData

您也没有发送正确的文件，而是使用
.find
函数发送实际的
HTML
元素。要将
实际对象
发送到控制器，您需要使用
findFiles[0]。files[0]
并将其附加到$中的
formData
。每个函数

我在每行代码中都为您添加了一些
注释

现场演示：


$（“#btn Newbar”）。在（“单击”，函数（）{
$（“#hbar”）。附加（“URL”）；
});
//实时显示高亮图片
$（document）.on（“change”，“.hpicFile”，函数（e）{
var imgSrc=$（this）.parent（'div'）.prev（）.find（'.catHpic'）//find img
如果（e.target.files[0]！=null）{
//console.log（e.target.files[0]）；
$.each（this.files，函数（键，文件）{
var reader=new FileReader（）；
reader.onload=函数（e）{
//实时显示图像
imgSrc.attr（'src'，e.target.result）；
}
reader.readAsDataURL（文件）；
});
}
});
//获取所有文件并通过ajax发送到控制器
$（文档）。在（“单击”，“btn HighlightUpdate”，函数（）上）{
//FormData
var formData=new formData（）
$（“.wholeBar”）。每个（函数（键、值）{
var findFiles=$（this.find（“.hpicFile”）//查找元素
var file=findFiles[0]。files[0]//获取实际的文件对象
append（'files[]，file）//将所有文件追加到formData
});
//Ajax请求
$.ajax({
url:“/Controller/UploadFiles”，
类型：“POST”，
processData:false，
contentType:false，
data:formData，//发送表单数据
成功：功能（响应）{
console.log（响应）
},
错误：函数（jqXHR、textStatus、errorshown）{
日志（textStatus，errorshown）；
}
});
});

新酒吧
更新更改
感谢兄弟的支持。你太棒了teacher@Palmal别担心。总是很乐意帮忙。快乐编码！
<div class="row" id="hbar">
</div>
<div class="card-footer" style="text-align:right;">
    <button class="btn btn-secondary" id="btn-Newbar">New Bar</button>
    <button class="btn btn-secondary" id="btn-HighlightUpdate">Update Changes</button>
</div>

$("#btn-Newbar").on("click", function () {
    $("#hbar").append("<div class='col-4 wholeBar' style='margin-bottom:20px;'><div class='row'><div class='col-3'><img src='' class='catHpic' style='height:80px;width:80px;'></div><div class='col-9'><input type='file' class='hpicFile'><div class='input-group mb-3' style='margin-top:10px;'><div class='input-group-prepend'><span class='input-group-text url'>URL</span></div><input type='text' class='form-control hurl' aria-describedby='basic-addon1' value=''></div></div></div></div>");
});

$(document).on("click", "#btn-HighlightUpdate", function () {
    var data = [];
    //data.push({ "Img": "fff" });

    $(".wholeBar").each(function (key, value) {
        var file = $(this).find(".hpicFile");
        data.push({ Img: file });
    });

    console.log(data);

    $.post('/Controller/UploadFiles', { Files: data }).done(function (data) {

        console.log(data);

    });
});