Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

rendering image for preview from selected file in file input tag

Tags:

html

image

Now I have a form field:

<input id="my_img_field" type="file"/>

After I select the image in the browser, I want to render the selected image file on the target img tag:

<img id="image_preview" />

But I want to do this after the $('#my_img_field').change event, i.e. I may want this done when I click some button later.

I heard that this could be done using HTML5 technique. Can someone teach me how?

like image 409
Alfred Huang Avatar asked Sep 02 '25 10:09

Alfred Huang


1 Answers

the code in vanilla js

var file = document.getElementById('my_img_field').files[0]
    var fr = new FileReader()
    fr.readAsDataURL(file)
    fr.onload = function(e) {
      var img = document.getElementById('image_preview')
      img.src = this.result
    } 
like image 80
leonel islas gonzález Avatar answered Sep 04 '25 03:09

leonel islas gonzález