How To Make Preview For Each File Input With Filereader

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 DO

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

Solution 2:

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

Solution 3:

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.