In this tutorial I’ll show you a small Javascript code which you can use to add an image and show it immediately.

First things first. Adding the input and the image tag.

<br />
&lt;input type="file" id="file" name="file" onchange="readURL(this);" required&gt;&lt;span id="filename"&gt;&lt;/span&gt;<br />
&lt;img src="" alt="" id="imediateImage" class="img-responsive"&gt;</p>
<p>

here we have to make sure we added the onchange attribute and adding the readURL(this) function.

Then we just add the javascript.

</p>
<p>//Show image imediately<br />
function readURL(input) {<br />
if (input.files &amp;&amp; input.files[0]) {<br />
var reader = new FileReader();<br />
reader.onload = function (e) {<br />
$('#imediateImage')<br />
.attr('src', e.target.result);<br />
};<br />
reader.readAsDataURL(input.files[0]);<br />
}<br />
}</p>
<p>

the added js takes the input tag with the onchange attribute on it and looks for an image, once the image is added it shows it to the image tag down below with the id on immediateImage.

if you use another id or don’t like this one than you can do it but changing the id on both the img tag and on the js.

 


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/lagjjail/public_html/kushtrim.net/wp-includes/functions.php on line 3729

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/lagjjail/public_html/kushtrim.net/wp-includes/functions.php on line 3729