Previewing Image on Contact Form 7

Question

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

Answer 1

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

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

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]);
        }
    });
});