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 — Rahul
– Rahul, Commented Dec 30, 2015 at 5: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
– Ye Htun Z, Commented Dec 30, 2015 at 5:28

Prabu Guna · Accepted Answer · 2015-12-30 05:41:25Z

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, 2015 at 5:41

answered Dec 30, 2015 at 5:17

Prabu Guna

3421 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ye Htun Z Over a year ago

i want to get for four input file. I already test for this. This work for one file input. Thk

Prabu Guna Over a year ago

Please check my updated answer this will help you :) @MaungYeHtunZaw

Ye Htun Z Over a year ago

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.

Prabu Guna Over a year ago

Please check this link I think you need to add JQuery. jsfiddle.net/prabuguna/oqyfvu8c

Prabu Guna Over a year ago

have you got it now?

|

devendra tata · Accepted Answer · 2015-12-30 05:20:49Z

0

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..

answered Dec 30, 2015 at 5:20

devendra tata

1412 silver badges9 bronze badges

Comments

Shokparbayev · Accepted Answer · 2017-05-11 06:58:54Z

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.

Collectives™ on Stack Overflow

How to make preview for each file input with filereader

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related