HTML - Display image after selecting filename

Question

I have a form that allows me with    lt input type  file  name  filename  accept  image gif  image jpeg  image png  gt    to browse and select a file   What I want to do is display that image immediately after the image has been selected  And this is before the  submit  button on the form has been pressed so the image almost certainly resides Client side  Can this be done

User · Answer

You can achieve this with the following code:

$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("input").after(img);
    }
});

Demo: http://jsfiddle.net/ugPDx/

User · Answer

Here You Go   HTML   lt  DOCTYPE html gt   lt html gt   lt head gt   lt link class  jsbin  href  http   ajax googleapis com ajax libs jqueryui 1 themes base jquery-ui css  rel  stylesheet  type  text css    gt   lt script class  jsbin  src  http   ajax googleapis com ajax libs jquery 1 jquery min js  gt  lt  script gt   lt script class  jsbin  src  http   ajax googleapis com ajax libs jqueryui 1 8 0 jquery-ui min js  gt  lt  script gt   lt meta charset utf-8   gt   lt title gt JS Bin lt  title gt   lt  -- if IE  gt     lt script src  http   html5shiv googlecode com svn trunk html5 js  gt  lt  script gt   lt   endif -- gt   lt style gt    article  aside  figure  footer  header  hgroup     menu  nav  section   display  block     lt  style gt   lt  head gt   lt body gt     lt input type  file  onchange  readURL this      gt       lt img id  blah  src     alt  your image    gt   lt  body gt   lt  html gt    Script   function readURL input            if  input files  amp  amp  input files 0                 var reader   new FileReader                 reader onload   function  e                        blah                        attr  src   e target result                       width 150                       height 200                               reader readAsDataURL input files 0                      Live Demo

User · Answer

This can be done using HTML5  but will only work in browsers that support it  Here s an example    Bear in mind you ll need an alternative method for browsers that don t support this  I ve had a lot of success with this plugin  which takes a lot of the work out of your hands

[html] HTML - Display image after selecting filename

Examples related to html

Examples related to file-upload