Loading an image to a img from input file

Question

I m trying to load an image selected by the user through an  element   I added a onchange event handler to the input element like this    lt input type  file  name  picField  id  picField  size  24  onchange  preview 2 this    alt     gt    and the preview 2 function is   var outImage   imagenFondo   function preview 2 what       globalPic   new Image        globalPic onload   function             document getElementById outImage  src   globalPic src            globalPic src what value      where outImage has the id value of the  tag where I want the new picture to be loaded   However  it appears that the onload never happens and it does not load anything to the html   What should I do

User · Accepted Answer

In browsers supporting the File API  you can use the FileReader constructor to read files once they have been selected by the user   Example  document getElementById  picField   onchange   function  evt        var tgt   evt target    window event srcElement          files   tgt files          FileReader support     if  FileReader  amp  amp  files  amp  amp  files length            var fr   new FileReader            fr onload   function                  document getElementById outImage  src   fr result                    fr readAsDataURL files 0                  Not supported     else              fallback -- perhaps submit the input to an iframe and temporarily store            them on the server until the user s session ends            Browser support   IE 10 Safari 6 0 2 Chrome 7 Firefox 3 6 Opera 12 02   Where the File API is unsupported  you cannot  in most security conscious browsers  get the full path of a file from a file input box  nor can you access the data   The only viable solution would be to submit the form to a hidden iframe and have the file pre-uploaded to the server   Then  when that request completes you could set the src of the image to the location of the uploaded file

User · Answer

ES2017 Way  x000D   x000D     convert file to a base64 url const readURL   file   gt        return new Promise  res  rej    gt            const reader   new FileReader            reader onload   e   gt  res e target result           reader onerror   e   gt  rej e           reader readAsDataURL file                  for demo const fileInput   document createElement  input    fileInput type    file   const img   document createElement  img    img attributeStyleMap set  max-width    320px    document body appendChild fileInput   document body appendChild img    const preview   async event   gt        const file   event target files 0       const url   await readURL file       img src   url      fileInput addEventListener  change   preview   x000D   x000D   x000D

User · Answer

x000D   x000D     document   ready function              imgload   change function              if  this files  amp  amp  this files 0                 var reader   new FileReader                reader onload   function  e                        imgshow   attr  src   e target result                             reader readAsDataURL this files 0                          x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt   lt input type  file  id  imgload   gt   lt img src     id  imgshow  align  left  gt  x000D   x000D   x000D   That works for me in jQuery

User · Answer

Andy E is correct that there is no HTML-based way to do this   but if you are willing to use Flash  you can do it   The following works reliably on systems that have Flash installed   If your app needs to work on iPhone  then of course you ll need a fallback HTML-based solution      Update 4 22 2013  HTML does now support this  in HTML5   See the other answers    Flash uploading also has other advantages -- Flash gives you the ability to show a progress bar as the upload of a large file progresses    I m pretty sure that s how Gmail does it  by using Flash behind the scenes  although I may be wrong about that    Here is a sample Flex 4 app that allows the user to pick a file  and then displays it    lt  xml version  1 0  encoding  utf-8   gt   lt s Application xmlns fx  http   ns adobe com mxml 2009                  xmlns s  library   ns adobe com flex spark                  xmlns mx  library   ns adobe com flex mx  minWidth  955  minHeight  600                 creationComplete  init    gt       lt fx Declarations gt           lt  -- Place non-visual elements  e g   services  value objects  here -- gt       lt  fx Declarations gt       lt s Button x  10  y  10  label  Choose file     click  showFilePicker      gt       lt mx Image id  myImage  x  9  y  44   gt       lt fx Script gt           lt   CDATA              private var fr FileReference   new FileReference                    Called when the app starts              private function init   void                                  Set up event handlers                  fr addEventListener Event SELECT  onSelect                   fr addEventListener Event COMPLETE  onComplete                                 Called when the user clicks  Choose file                 private function showFilePicker   void                               fr browse                                  Called when fr browse   dispatches Event SELECT to indicate                that the user has picked a file              private function onSelect e Event  void                               fr load       start reading the file                               Called when fr load   dispatches Event COMPLETE to indicate                that the file has finished loading              private function onComplete e Event  void                               myImage data   fr data     load the file s data into the Image                          gt       lt  fx Script gt   lt  s Application gt

User · Answer

x000D   x000D  var outImage   imagenFondo   x000D  function preview 2 obj  x000D    x000D   if  FileReader  x000D     x000D    var reader   new FileReader    x000D    reader readAsDataURL obj files 0    x000D    reader onload   function  e    x000D    var image new Image    x000D    image src e target result  x000D    image onload   function      x000D     document getElementById outImage  src image src  x000D       x000D      x000D     x000D   else x000D     x000D           Not supported x000D     x000D    x000D   lt  doctype html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt meta charset  utf-8  gt  x000D   lt title gt preview photo lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D   lt form gt  x000D    lt input type  file  onChange  preview 2 this    gt  lt br gt  x000D    lt img id  imagenFondo  style  height  300px width  300px   gt  x000D   lt  form gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

As iEamin said in his answer  HTML 5 does now support this   The link he gave  http   www html5rocks com en tutorials file dndfiles    is excellent   Here is a minimal sample based on the samples at that site  but see that site for more thorough examples   Add an onchange event listener to your HTML    lt input type  file  onchange  onFileSelected event   gt    Make an image tag with an id  I m specifying height 200 to make sure the image isn t too huge onscreen     lt img id  myimage  height  200  gt    Here is the JavaScript of the onchange event listener   It takes the File object that was passed as event target files 0   constructs a FileReader to read its contents  and sets up a new event listener to assign the resulting data  URL to the img tag   function onFileSelected event      var selectedFile   event target files 0     var reader   new FileReader       var imgtag   document getElementById  myimage      imgtag title   selectedFile name     reader onload   function event        imgtag src   event target result          reader readAsDataURL selectedFile

[javascript] Loading an image to a <img> from <input file>

Example

Browser support

Examples related to javascript

Examples related to html