Edward Hasted Edward Hasted - 1 year ago 638
HTML Question

HTML - Display image after selecting filename

Possible Duplicate:

Preview an image before it is uploaded

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?

Answer Source

Here You Go:


<!DOCTYPE html>
<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>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  <input type='file' onchange="readURL(this);" />
    <img id="blah" src="#" alt="your image" />


function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                    .attr('src', e.target.result)


Live Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download