Get Contact form 7 多个图像名称

Question

我用这个插件创建了一个多图像 selection 按钮。

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>

现在我希望如果用户select多张图片那么所有的图片名称都会像这样 xyz.jpg, abc.png, pqr.jpg 在 "No file selected"

的地方

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(", "));
});

Get Contact form 7 多个图像名称

Get Contact form 7 multiple image name

wordpress

contact-form-7