190

I have a form that allows me with

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">

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?

1

3 Answers 3

348

Here You Go:

HTML

<!DOCTYPE html>
<html>
  <head>
    <link
      class="jsbin"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      class="jsbin"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
    ></script>
    <script
      class="jsbin"
      src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"
    ></script>
    <meta charset="utf-8" />
    <title>JS Bin</title>
    <!--[if IE]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
      article,
      aside,
      figure,
      footer,
      header,
      hgroup,
      menu,
      nav,
      section {
        display: block;
      }
    </style>
  </head>
  <body>
    <input type="file" onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />
  </body>
</html>

Script:

function readURL(input) {
  if (input.files && 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

9
  • 2
    This do not works on IE! IE dont have FileReader class!
    – Rodrigo
    Commented Feb 27, 2013 at 17:29
  • 1
    the demo work for me but in my site(local host) not - > what can be the reason that function (e) not called after i upload image?
    – GO VEGAN
    Commented Jan 23, 2014 at 11:29
  • 1
    This works great, Is it possible to show the same image in multiple areas? for example is it possible to assign the image to the background of a div by getting the image path and adding it to background: url(' IMG PATH ')
    – UserDy
    Commented Nov 11, 2014 at 16:58
  • 25
    I think you should have given the credits to Ivan Baev: stackoverflow.com/a/4459419/2550529
    – SepehrM
    Commented Sep 1, 2015 at 11:53
  • 2
    If the user hits (cancel) and does not choose a file, an error is thrown to the console. Please check for the value of (f) before executing the line reader.readAsDataURL(input.files[0]); Commented Dec 20, 2016 at 3:03
38

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/

3
  • This doesn't appear to work. When I run the JSFIDDLE test site I can browse and chose the filename but nothing is displayed. Tried this in IE and Opera. What am I doing wrong? Commented Sep 14, 2012 at 6:01
  • Both on the JFiddle page and when trying to implement it on my own page, I get the error "e.originalEvent.srcElement is undefined". When I check e.originalEvent, it just has properties: bubbles, cancelable, currentTarget, defaultPrevented, eventPhase, explicitOriginalTarget, isTrusted, originalTarget, target, timeStamp, type, and proto. The uploaded file name and some details are available under e.orginalEvent.originalTarget.files, but I can't figure out where to find the source of the image. Commented Feb 13, 2015 at 12:04
  • Can I get file name using reader.result in the same loop to assign to img ids? help would be appreciated. Commented Sep 30, 2018 at 8:57
6

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.

1
  • 1
    Uploading the files and moving them is easy. My problem is displaying them the moment a valid file has been chosen. I haven't been able to get any of the suggestions given so far to work. As for HTML5 bring it on, but until it becomes ubiquitous I have to write a solution that works for the bulk of the browsers out there :-( Commented Sep 14, 2012 at 6:06

Not the answer you're looking for? Browse other questions tagged or ask your own question.