jQuery：从元素中提取值并将其插入到可重复列表表单字段中的字段中

我有一个表格，表格中有一个可重复的列表。除了可重复列表中的文本输入，我不能有其他字段。因此，为了允许用户提交图像，我将文件上传输入与可重复列表字段分开，如下所示

我想知道是否可以使用jQuery获取文件上传字段中的文件名，并将它们插入到其各自列中的可重复列表字段中

查看表单生成的标记，我觉得只有我的jQuery知识不允许我想到解决方案才有可能

下面是组成可重复列表的标记

<div class="ginput_container ginput_container_list ginput_list">
    <table class="gfield_list gfield_list_container">
        <colgroup>
            <col id="gfield_list_2_col_1" class="gfield_list_col_odd">
                <col id="gfield_list_2_col_2" class="gfield_list_col_even">
                    <col id="gfield_list_2_col_3" class="gfield_list_col_odd">
                        <col id="gfield_list_2_col_4" class="gfield_list_col_even">
        </colgroup>
        <thead>
            <tr>
                <th scope="col">Side</th>
                <th scope="col">Reference</th>
                <th scope="col">Notes</th>
                <td>&nbsp;</td>
            </tr>
        </thead>
        <tbody>
            <tr class="gfield_list_group gfield_list_row_odd">
                <td class="gfield_list_cell gfield_list_2_cell1" data-label="Side">
                    <input aria-label="Side" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_cell gfield_list_2_cell2" data-label="Reference">
                    <input aria-label="Reference" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_cell gfield_list_2_cell3" data-label="Notes">
                    <input aria-label="Notes" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_icons">
                    <a href="javascript:void(0);" class="add_list_item " aria-label="Add another row" onclick="gformAddListItem(this, 0)" onkeypress="gformAddListItem(this, 0)"><img src="localhost/images/list-add.svg" alt="" title="Add a new row"></a>
                    <a href="javascript:void(0);" class="delete_list_item" aria-label="Remove this row" onclick="gformDeleteListItem(this, 0)" onkeypress="gformDeleteListItem(this, 0)" style="visibility: visible;"><img src="localhost/images/list-remove.svg" alt="" title="Remove this row"></a>
                </td>
            </tr>
            <tr class="gfield_list_group gfield_list_row_even">
                <td class="gfield_list_cell gfield_list_2_cell1" data-label="Side">
                    <input aria-label="Side" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_cell gfield_list_2_cell2" data-label="Reference">
                    <input aria-label="Reference" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_cell gfield_list_2_cell3" data-label="Notes">
                    <input aria-label="Notes" type="text" name="input_2[]" value="">
                </td>
                <td class="gfield_list_icons">
                    <a href="javascript:void(0);" class="add_list_item " aria-label="Add another row" onclick="gformAddListItem(this, 0)" onkeypress="gformAddListItem(this, 0)"><img src="localhost/images/list-add.svg" alt="" title="Add a new row"></a>
                    <a href="javascript:void(0);" class="delete_list_item" aria-label="Remove this row" onclick="gformDeleteListItem(this, 0)" onkeypress="gformDeleteListItem(this, 0)" style="visibility: visible;"><img src="localhost/images/list-remove.svg" alt="" title="Remove this row"></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

一边
参考文献
笔记

下面是生成文件上载文件名预览的标记

<div id="gform_preview_5_3">
    <div id="o_1dn37jigsu7cu20drk138i17k0f" class="ginput_preview"><img class="gform_delete" src="localhost/images/delete.png" onclick="gformDeleteUploadedFile(5,3, this);" onkeypress="gformDeleteUploadedFile(5,3, this);" alt="Delete this file" title="Delete this file"> <strong>Doa Ditimpa Musibah.jpg</strong></div>
    <div id="o_1dn37jd93vp41aic1030166912o8a" class="ginput_preview"><img class="gform_delete" src="localhost/images/delete.png" onclick="gformDeleteUploadedFile(5,3, this);" onkeypress="gformDeleteUploadedFile(5,3, this);" alt="Delete this file" title="Delete this file"> <strong>surah-al-layl.jpg</strong></div>
</div>

Doa Ditimpa Musibah.jpg
surah al-layl.jpg

---

提前感谢您的帮助！在此期间，我将继续尝试一些东西

您现在可以使用以下命令将文件上载包含在可重复列表中

<input aria-label="Reference" type="file" id="file_upload" name="input_2[]" value="">

$('#file_upload').change(function(){

  var img_file = $('#file_upload').prop('files')[0];
  console.log(img_file);//this will show all properties of the uploaded file

  //you can get the file name through 
  var file_name = img_file.name;

});

$（'#文件上传'）。更改（函数（）{
var img_file=$（'#file_upload'）.prop（'files'）[0]；
console.log（img_文件）；//这将显示上载文件的所有属性
//您可以通过以下方式获取文件名：
var file_name=img_file.name；
});

我结束这个问题，下面是我对这个任务的解决方案。它不是动态的、自动化的，但也可以。我会制作10个变量和10个条件，希望用户上传的文件不要超过10个。如果有人能告诉我如何编写一个动态的、自动化的jQuery脚本，那就太棒了

var str = $( "#gform_preview_5_3 div:nth-child(1) strong" ).text();
var str2 = $( "#gform_preview_5_3 div:nth-child(2) strong" ).text();

$( ".gfield_list_group:nth-child(1) td:nth-child(2) input " ).val( str );
$( ".gfield_list_group:nth-child(2) td:nth-child(2) input " ).val( str2 );

---

这是我到目前为止的想法——如果我能想出如何动态地获取第n个子项，并使变量根据行进行动态乘法，那就太棒了！谢谢@YXN的回答。不幸的是，表单来自WordPress插件，它不支持在可重复列表字段中使用文件上载字段。这是什么WordPress插件？它被称为重力表单。之前，我尝试将可重复列表中的文本字段更改为文件上载，并成功。但是，它不会为表单处理和提交存储任何值。我在StackOverflow上发布了这个问题，询问了插件开发人员和一位程序员朋友，但没有找到解决方案。因此，我在上面提出了这个想法，将文件上传字段分开，但将其引用到可重复列表中。您检查过这里的文档了吗？或者我们没有像$\u POST那样检查$\u文件？是的，我认为需要进行一些主要的编程，以使文件上传字段在可重复列表中完全工作。不幸的是，我不是一名程序员。我在SO上发了帖子，也没有得到回复