How to preview selected image in input type="file" in popup using jQuery?

Question

In my code, I am allowing the user to upload an image. Now I want to show this selected image as a preview in this same popup. How can I do it using jQuery?

The following is the input type I am using in my popup window.

HTML code:

<input type="file" name="uploadNewImage">

what server side code are you using to upload it? you will need to use that. — chiliNUT, Aug 27 '13 at 05:06
@Prasad, you have to use some kind of plugin may be, visit this http://plugins.jquery.com/ — RONE, Aug 27 '13 at 05:08
you can do this with javascript....look here: https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded — hyphen, Jan 18 '20 at 13:25

score 197 · Accepted Answer · edited May 23 '17 at 12:02

197

Demo

HTML:

 <form id="form1" runat="server">
   <input type='file' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
</form>

jQuery

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

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function(){
    readURL(this);
});

Reference

edited May 23 '17 at 12:02

Community

1
1

answered Aug 27 '13 at 05:19

Prabu Parthipan

3,673
2
16
25

Thanks prabu, but its not giving full path of image, its just returning a image name – Prasad Aug 27 '13 at 05:32
which browser you using – Prabu Parthipan Aug 27 '13 at 05:33
all chrome, mozilla, opera, safari except IE – Prasad Aug 27 '13 at 05:34
use $('#imgInp').val() to get full path – Prabu Parthipan Aug 27 '13 at 05:36
Amazing trick prabu!,:) is FileReader() is HTML5 API? can you plz provide me links where I can get new html5 API list and their details – Prasad Aug 27 '13 at 05:43
https://developer.mozilla.org/en-US/docs/Web/API – Prabu Parthipan Aug 27 '13 at 05:45
This is pretty amazing. Got it working in ie10. Definitely doesnt work in ie9 or earlier(by my testing.) Thank you. – Jun 09 '14 at 18:17
@PrabuParthipan the answer worked like a charm. thanks. – anusreemn Jun 19 '14 at 09:20
2

Not supported in IE9 or IE8, but other than that it has pretty good support... http://caniuse.com/#feat=filereader – Kirkland Sep 17 '14 at 07:20
How can i do when i have four file input..? please solution how to do..Thank.. – Ye Htun Z Dec 30 '15 at 04:13

score 46 · Answer 2 · answered Aug 27 '13 at 05:24

If your are using HTML5 then try following code snippet

<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">

    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };

</script>

What is the difference with the accepted answer? I don't see any HTML5 related difference... (and BTW the onload declaration should come before the .readAsDataURL method call) — Bernoulli IT, Jan 22 '19 at 13:48

Abdo-Host · Answer 3 · 2020-06-23T12:29:17.987

You can use URL.createObjectURL

    function img_pathUrl(input){
        $('#img_url')[0].src = (window.URL ? URL : webkitURL).createObjectURL(input.files[0]);
    }

#img_url {
  background: #ddd;
  width:100px;
  height: 90px;
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="" id="img_url" alt="your image">
<br>
<input type="file" id="img_file" onChange="img_pathUrl(this);">

MD Ashik · Answer 4 · 2016-06-15T13:21:50.583

Just check my scripts it's working well:

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

#list img{
  width: auto;
  height: 100px;
  margin: 10px ;
}

score -2 · Answer 5 · answered Aug 27 '13 at 05:12

-2

You can use ajax upload to preview your selected file.. http://zurb.com/playground/ajax-upload

answered Aug 27 '13 at 05:12

Prasanna Aarthi

3,193
2
21
44

But what if he wants to preview the file before he uploads it? – ShoeLace1291 May 06 '18 at 03:21

How to preview selected image in input type="file" in popup using jQuery?

5 Answers5

Linked

Related