How to make preview for each file input with filereader

Question

I want to make preview for each file input. I have three file upload like this. I want preview of this input' upload preview for each.. I don't know how to use this. function on DOM element. Thank All.

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

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

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

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

        oFReader.onload = function (oFREvent) {
            document.getElementById(this."uploadPreview").src = oFREvent.target.result;
        };
    };
</script>

Try like this ......... [html javascript image preview before upload-- code sample](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — Rahul Changlani, Dec 30 '15 at 05:25
Yes, This is preview for one file input upload, i want to konw how to preview for 4 file input with one function. — Ye Htun Z, Dec 30 '15 at 05:28

Prabu Guna · Accepted Answer · 2015-12-30T05:41:25.973

1

Please take a look at the sample JS code using jquery:

function readURL(input, img_id) {

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

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

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

$(".img-up").change(function(){

    readURL(this, $(this).attr('data-id'));
});

HTML

    <form id="form1" runat="server">
    <input type='file' id="img1" class="img-up" data-id="img_view1" />
    <img id="img_view1" src="#" alt="your image" />

    <input type='file' id="img2" class="img-up" data-id="img_view2" />
    <img id="img_view2" src="#" alt="your image" />
</form>

The input file data-id and img tag id must be same. Hope you will understand see this code.

edited Dec 30 '15 at 05:41

answered Dec 30 '15 at 05:17

Prabu Guna

334
1
3
13

i want to get for four input file. I already test for this. This work for one file input. Thk – Ye Htun Z Dec 30 '15 at 05:20
Please check my updated answer this will help you :) @MaungYeHtunZaw – Prabu Guna Dec 30 '15 at 05:29
http://codepen.io/maungyehtunzaw/pen/LGbdEO your code is at here, it not work. pease check what i need to do. I just test on codepen to show you. – Ye Htun Z Dec 30 '15 at 05:34
Please check this [link](https://jsfiddle.net/prabuguna/oqyfvu8c/) I think you need to add JQuery. https://jsfiddle.net/prabuguna/oqyfvu8c/ – Prabu Guna Dec 30 '15 at 05:39
have you got it now? – Prabu Guna Dec 30 '15 at 05:54
Yes Thank, i got it from above link. what version of jQuery i need to link? – Ye Htun Z Dec 30 '15 at 06:32

score 0 · Answer 2 · answered Dec 30 '15 at 05:20

Upload Preview jQuery Plugin

How it works?

To get access to the not uploaded data, we can use the HTML5 file reader api. This api provides reading local files. This step is pretty important, because we need to this data in order to show it in the browser window. To get more information about the file reader, you can read the offical documentation..

score 0 · Answer 3 · answered May 11 '17 at 06:58

HTML:

 <input type="file" class="" name="img" id="uploadImage" onchange="PreviewImage()" />
    <div class="image_uploaded" id="image_uploaded">
    </div>

Javascript:

var counter = 0;
    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
        oFReader.onload = function(oFREvent) {
            var img = document.createElement("img");
            img.id = "uploadPreview" + counter;
            img.src = oFREvent.target.result;
            var src = document.getElementById("image_uploaded");
            src.appendChild(img);

            counter++;
        };
    };

I hope it will help someone.

How to make preview for each file input with filereader

3 Answers3

Linked