HTML input type=file, get the image before submitting the form

Question

I'm building a basic social network and in the registration the user uploads a display image. Basically I wanted to display the image, like a preview on the same page as the form, just after they select it and before the form is submitted.

Is this possible?

possible duplicate of [How to upload preview image before upload through JavaScript](http://stackoverflow.com/questions/4094012/how-to-upload-preview-image-before-upload-through-javascript) — Paul D. Waite, Apr 27 '11 at 14:42

score 69 · Answer 1 · edited Oct 17 '14 at 18:32

69

Here is the complete example for previewing image before it gets upload.

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://goo.gl/r57ze"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>

JavaScript :

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]);
  }
}

edited Oct 17 '14 at 18:32

Andrew Hubbs

8,842
8
43
70

answered Dec 27 '12 at 10:28

Hardik Sondagar

3,796
3
23
42

it'll not render the urls but it shows the images directly from local storage using embedding image in text... just try this code then commnet – Hardik Sondagar Dec 28 '12 at 11:21
1

you misunderstand. the question was why did you use a url shortener(goo.gl)? it hides/obfuscate the urls – goat Dec 28 '12 at 15:48
1

O really sorry..!! Thanks for correction.. I replaced it with original URLs. – Hardik Sondagar Dec 28 '12 at 15:57

score 44 · Answer 2 · answered Jan 17 '16 at 15:51

I found This simpler yet powerful tutorial which uses the fileReader Object. It simply creates an img element and, using the fileReader object, assigns its source attribute as the value of the form input

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

score 17 · Answer 3 · answered Nov 10 '11 at 19:43

17

this can be done very easily with HTML 5, see this link http://www.html5rocks.com/en/tutorials/file/dndfiles/

answered Nov 10 '11 at 19:43

iEamin

273
4
10

score 5 · Answer 4 · edited May 23 '17 at 11:46

5

I feel we had a related discussion earlier: How to upload preview image before upload through JavaScript

edited May 23 '17 at 11:46

Community

1
1

answered Apr 27 '11 at 10:38

Maddy

3,316
9
37
53

Ah, good spot. I’ve marked the question as a potential duplicate. – Paul D. Waite Apr 27 '11 at 14:42

score 0 · Answer 5 · answered Apr 27 '11 at 10:29

0

Image can not be shown until it serves from any server. so you need to upload the image to your server to show its preview.

answered Apr 27 '11 at 10:29

Naren Sisodiya

6,846
2
22
35

Thanks, simple but exactly what I needed :) – Tom Apr 27 '11 at 10:30
8

This is a wrong answer... although it appear on top results... see other links in this discussion or http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload – Romain Bruckert Apr 04 '17 at 15:51

HTML input type=file, get the image before submitting the form

5 Answers5

Linked