If we need to display the preview of the image on upload, we can write a simple javascript function to perform the same this can be done as :
<!DOCTYPE html>
<html>
<body>
<script>
function img(x) {
document.getElementById('blah').src = window.URL.createObjectURL(x);
}
</script>
<img id="blah" alt="your image" width="100" height="100"/>
<input type="file" onchange="img(this.files[0])">
</body>
</html>
In the above code we are just calling the img() javascript function onchange event of the input tag.
we are passing the image as a object to the img() function as img(this.files[0]). the Javascript function receives the image object and then sets the src of the img tag by :
document.getElementById('blah').src = window.URL.createObjectURL(x);
With the above js statement the image uploaded gets displayed in a preview in the img tag. This way we can preview the image on upload.
0 Comment(s)