HTML - Display image after selecting filename

Question

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?

Multi file select preview without uploading and delayed upload http://anasthecoder.blogspot.in/2014/12/multi-file-select-preview-without.html — Ima, Aug 10 '15 at 07:01

score 323 · Accepted Answer · edited May 21 '17 at 13:30

323

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

edited May 21 '17 at 13:30

Pehlaj - Mobile Apps Developer

9,006
9
35
48

answered Sep 11 '12 at 11:48

ygssoni

6,783
2
20
22

Aplogies for taking so long. I revisted your answer and it works perfectly, but not in IE which is what I tested it in originally. Many thanks. – Edward Hasted Oct 08 '12 at 14:53
2

This do not works on IE! IE dont have FileReader class! – Rodrigo Feb 27 '13 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 Jan 23 '14 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 Nov 11 '14 at 16:58
19

I think you should have given the credits to Ivan Baev: http://stackoverflow.com/a/4459419/2550529 – SepehrM Sep 01 '15 at 11:53
@UserDy, `document.body.style.backgroundImage = 'url(' + e.target.result + ')';` See http://stackoverflow.com/a/6669252/266531 – Kirby Sep 11 '15 at 23:16
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]);` – Ruslan Abuzant Dec 20 '16 at 03:03
Instances of `input.files[0]` was causing an error. `input.target.files[0]` worked instead. – Talvi Watia Mar 12 '18 at 19:04

score 35 · Answer 2 · edited Jul 16 '16 at 18:55

35

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/

edited Jul 16 '16 at 18:55

Jim Jones

2,097
5
19
41

answered Sep 11 '12 at 11:45

Xavier

1,564
3
25
43

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? – Edward Hasted Sep 14 '12 at 06: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. – Lisa DeBruine Feb 13 '15 at 12:04
Can I get file name using reader.result in the same loop to assign to img ids? help would be appreciated. – Umer Farooq Sep 30 '18 at 08:57

score 4 · Answer 3 · answered Sep 11 '12 at 11:47

4

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.

answered Sep 11 '12 at 11:47

Kelvin

4,909
21
35

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 :-( – Edward Hasted Sep 14 '12 at 06:06

HTML - Display image after selecting filename

3 Answers3

Linked