Question

50

Select and display image(s) using FileReader

rated 0 times [ 57] [ 7] / answers: 1 / hits: 31276 / 11 Years ago, sat, september 21, 2013, 12:00:00

Here is my problem, i have this little code to display img that i'm uploading LIVE without reload, but it works only with one img because readURL(input) doesn't have a class and works directly from noname-input, and when i'm adding a class readURL(input.joint), it drops error! Here is my code:

    <input class=joint type='file' id=imgInp />

    <img style=width:45px id=blah src=# alt=your image />





<script type=text/javascript>

function readURL(input) {



    if (input.filers && input.files[0]) {

        var reader = new FileReader();



        reader.onload = function (e) {

            $('#blah').attr('src', e.target.result);

        }



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

    }

}



$(#imgInp).change(function(){

    readURL(this);

});

</script>

I need to add some id or class to this jquery function to make it unique to every input.

What i'm trying to do:

<input class=joint type='file' id=imgInp />

        <img style=width:45px id=blah src=# alt=your image />





    <script type=text/javascript>

    function readURL(input.joint) {



        if (input.joint.filers && input.joint.files[0]) {

            var reader = new FileReader();



            reader.onload = function (e) {

                $('#blah').attr('src', e.target.result);

            }



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

        }

    }



    $(#imgInp).change(function(){

        readURL(this);

    });

    </script>





<input class=file2 type='file' id=imgInp />

        <img style=width:45px id=blah src=# alt=your image />





    <script type=text/javascript>

    function readURL(input.file2) {



        if (input.file2.filers && input.file2.files[0]) {

            var reader = new FileReader();



            reader.onload = function (e) {

                $('#blah').attr('src', e.target.result);

            }



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

        }

    }



    $(#imgInp).change(function(){

        readURL(this);

    });

    </script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

juancarlos

Add To Favorites

Follow

Total Points: 580

Total Questions: 105

Total Answers: 103

Location: Grenada

Member since Sun, Dec 20, 2020

4 Years ago

juancarlos questions

1 Material-UI Select doesn't update after onChange

Wed, Mar 24, 21, 00:00, 3 Years ago

1 .includes() with .filter() in vue.js

Wed, Jul 15, 20, 00:00, 4 Years ago

1 How to get a Checkbox Value in JavaScript

Wed, Jan 8, 20, 00:00, 5 Years ago

1 How to get the length of the text inside the React component

Mon, May 20, 19, 00:00, 5 Years ago

1 Highlight row in one react table is highlighting the same row in a second one on the page

Tue, Jan 22, 19, 00:00, 5 Years ago

View All

answered 11 Years ago aubreeg · Accepted Answer

You have duplicate ids all over (imgInp and blah), so the selector will select only the first one, eventually your event is bound only to the first input field and the selection of $('#blah') as well. You need to select the relative image with respect to the input. You dont have to duplicate the script as well. Select the next image tag relative to the input like $(input).next('img').attr('src', e.target.result);

So try:

function readURL(input) {



    if (input.files && input.files[0]) {

        var reader = new FileReader();



        reader.onload = function (e) {

            $(input).next('img').attr('src', e.target.result);

        }



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

    }

}





$(function(){   

    $(.upld).change(function () { //set up a common class

        readURL(this);

    });

});

Fiddle