Search code examples
javascripthtmlimageinputbootstrap-file-input

I have a list of inputs type file and it accept image only .. How can i view an image when i add one?

i wrote this code and its working but when i choose image all inputs view the same image not only the one i added the image to ..

<html lang="en">
<head>
    <title>Change image on select new image from file input</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <ul>
        <li>
            <input type="file" name="file" class="profile-img">
            <img src="" class="profile-img-tag" width="200px" />
        </li>
        <li>
            <input type="file" name="file" class="profile-img">
            <img src="" class="profile-img-tag" width="200px" />
        </li>
        <li>
            <input type="file" name="file" class="profile-img">
            <img src="" class="profile-img-tag" width="200px" />
        </li>
    </ul>

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.profile-img-tag').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $(".profile-img").change(function(){
        readURL(this);
    });
</script>


</body>
</html>

Just cant make it for every input separatly.

Solution

  • Just change attribute of image that is next to clicked input:

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


    <html lang="en">
<head>
<title>Change image on select new image from file input</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<ul>
    <li>
        <input type="file" name="file" class="profile-img">
        <img src="" class="profile-img-tag" width="200px" />
    </li>
    <li>
        <input type="file" name="file" class="profile-img">
        <img src="" class="profile-img-tag" width="200px" />
    </li>
    <li>
        <input type="file" name="file" class="profile-img">
        <img src="" class="profile-img-tag" width="200px" />
    </li>
</ul>

<script type="text/javascript">
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(input).next().attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$(".profile-img").change(function(){
    readURL(this);
});
</script>


</body>
</html>