在 Contact Form 7 上预览图像

Question

我只是想知道我是否可以在我的文件上显示我选择的图像并在我的表单上轻松预览它，我在 Wordpress 上使用联系表单 7，我需要你的帮助

例如：我在我的设备上选择一张图片，一旦我选择了它，该图片就会显示在表单上

Answer 1

您可以使用以下代码片段在联系表 7 上预览上传的图片

此input[name=image]必须与您输入的类型文件名相匹配

在您的联系表 7 中创建一个空的 div，ID 为 divid，即 <div id='divid'></div>

jQuery(document).ready(function(){
    jQuery('input[name=image]').on('change', function(){
        alert('fd');
        if (this.files && this.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                jQuery('#divid').html('<img src="'+e.target.result+'">');
            }
            console.log(this.files[0]);
            reader.readAsDataURL(this.files[0]);
        }
    });
});

在 Contact Form 7 上预览图像

Previewing Image on Contact Form 7

wordpress

contact-form-7