Using same javascript function to change preview of multiple image upload

Question

I have written code which allows user to upload multiple file upload :

<asp:Image ID="image01" runat="server" Width="20%" onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"/>
                                        <asp:FileUpload ID="image01_update" runat="server" onchange="showPreview(this);"/>
                                        <asp:Image ID="image02" runat="server" Width="20%" onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"/>
                                        <asp:FileUpload ID="image02_update" runat="server" onchange="showPreview(this);"/>
                                        <asp:Image ID="image03" runat="server" Width="20%" onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"/>
                                        <asp:FileUpload ID="image03_update" runat="server" onchange="showPreview(this);"/>
                                        <asp:Image ID="image04" runat="server" Width="20%" onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"/>
                                        <asp:FileUpload ID="image04_update" runat="server" onchange="showPreview(this);"/>

The javascript function which shows preview for uploaded image is as follows :

function showPreview(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#image01').css('visibility', 'visible');
                $('#image01').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

currently preview is working for first image upload only, as i am passing ID- #image01.

I want to use same javascript function to show preview for all four image uploaders. i.e. when i upload first image from #image01, it must show it's preview, for 2nd it must show 2nd image's preview.. and so on....

NOTE : i am using image upload in form editing mode, if there is no image uploaded ,

onError="this.onerror=null;this.src='/resourceContent/resaleContent/altImage.png';"

this code will show an alternate image.

user5217795 · Accepted Answer · 2017-07-04 05:31:02Z

1

function showPreview(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(input).prev().css('visibility', 'visible');
                $(input).prev().attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

answered Jul 4, 2017 at 5:31

user5217795

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

Comments

maximelian1986 · Accepted Answer · 2017-07-04 05:42:09Z

0

Also you can use "data-" propery on button like this.

HTML

<div>
    <div id="image01"></div>
    <button data-id="#image01" id="testBtn">Press me</button>
</div>

JS

$(document).on('click', '#testBtn', function () {
        var id = $(this).data('id');
        $(id).text('testim');
    });

answered Jul 4, 2017 at 5:42

maximelian1986

2,5022 gold badges20 silver badges38 bronze badges

Collectives™ on Stack Overflow

Using same javascript function to change preview of multiple image upload

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related