获取联系人表格7多个图片名称

Question

我已经使用此插件创建了多个图像选择按钮。

https://wordpress.org/plugins/multifile-upload-field-for-contact-form-7/

下面是我的联系表7代码。

<div class="file wrap">
    <div class="fileText">Upload Photos</div>
    [multifile multi-images id:img_upload]
</div>
<div class="file_names">No file selected</div>

现在，我希望如果用户选择多个图像，那么所有图像名称都将像这样xyz.jpg, abc.png, pqr.jpg在“未选择文件”的位置]

Answer 1

在表单底部添加此内容：

<script>
jQuery(document).ready(function($) {
    $('.wpcf7-multifile').first().on('change', function() {
        var files = $(this).prop("files");
        var names = $.map(files, function(val) { return val.name; });
        $('.file_names').html(names.join(', '));
    }); 
});
</script>

Answer 2

您可以使用jQuery完成此操作。将此代码添加到您的js文件中。

jQuery('.file input[type="file"]').on('change', function () {
    var names = [];
    for (var i = 0; i < jQuery(this).get(0).files.length; ++i) {
        names.push(jQuery(this).get(0).files[i].name);
    }
    jQuery(this).parent().parent().parent().parent().find('.file_names').text(names.join(", "));
});