CODEWITHSUNDEEP
javascriptjqueryfile-upload
ace
ace

Reputation: 225

Using same javascript function to change preview of multiple image upload

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.

Upvotes: 0

Views: 330

Answers (2)

maximelian1986
maximelian1986

Reputation: 2452

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');
    });

Upvotes: 0

user5217795
user5217795

Reputation: 

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]);
        }
    }

Upvotes: 1

Related Questions