fbpx
35 C
Lahore

How to get Base64Image from input type file?

Must read

Ayyaz Zafarhttps://www.ayyaztech.com
I am Full Stack Web Developer with 10 years of professional Experience. I have following Skills: HTML5, CSS3, Javascript, jQuery, Ajax, PHP, MySQL, jQuery, Angular, React.js, Wordpress, Codeigniter, Laravel, Node.js, Mongo DB, Express.js, GraphQL, Typescript, Apollo and many more..
<input  type="file" id="user_img_input" onchange="upload_user_img(this);" /> 
<img src="" id="img" />
<script>
function setBase64Image(object, img_id) {
    if ( object.files && object.files[0] ) {
        var FR = new FileReader();
        FR.onload = function(e) {

             $(img_id).attr("src", e.target.result);
        };       
        FR.readAsDataURL( object.files[0] );
    }
}

 function upload_user_img(inputObject)
  {
    setBase64Image(inputObject, '#img');
  }
</script>

Live Demo:

- Advertisement -spot_img

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article