时间戳

首页 > 解决方案 > jQuery：从元素中提取值并将其插入可重复列表表单字段的字段中

jquery - 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>

在此先感谢您的帮助！与此同时，我会继续尝试一些东西！

标签： jquery

解决方案

您现在可以使用此将您的文件上传包含在可重复列表中

<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;

});

推荐阅读