Image preview before upload using JavaScript
HTML / JavaScript

Image preview before upload using JavaScript

Image preview before upload using JavaScript

Displaying image preview before upload is possible using JavaScript. I will show you how. Try the given example it will work perfectly as you want.

HTML:

<input type="file"  onchange="document.getElementById('preview').src = window.URL.createObjectURL(this.files[0])">
<img id="preview" width="106" height="122" />

JS:

<script>
var loadFile = function(event) {
    var output = document.getElementById('preview');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Thanks for visiting.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *