在联系表 7 上预览图像 [英] Previewing Image on Contact Form 7

问题描述

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

I was just wondering if I can display image that I choose on my files and easily preview it on my form, I was using contact form 7 on Wordpress and I need your help

例如:我正在我的设备上选择一个图像，并且我选择它后，该图像将显示在表单上

For example: I'm picking an image on my device and a soon as I picked it, the image will be displayed on the form

推荐答案

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

You can use below code snippet to preview uploaded image on contact form 7

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

This input[name=image] must match your input type file name

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

In your contact form 7 create one empty div with the id as divid i.e. <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]);
        }
    });
});

这篇关于在联系表 7 上预览图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！