How to Auto Get <img id=""> JavaScript

[riwakawd]

On my readURL() function in my scrtipt. I would like to know what would be the best method in being able to auto get the ID from my img tag. Because I have mulitple img rows that get created with own id.

What would you think so that the reader.onload part can set it so the selector part where put ID can auto get any id from img tag. And work with the attr 'src'. Currently I have to enter each id in manuall which is bit anoying.

Thanks very much in advance.

**Script **

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

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

    $("#file-input").change(function() {
    readURL(this);
});

[Traevel]

You're already using jQuery, have a look at the selectors it provides.

You could use $(img) to get all img elements. If you only want specific images you could give them a class and select on that using $(.class) or $(img.class). You could even use something like $(img[src*='album']) that checks the src attribute of all images for the occurrence of the word album.

You could even go old school and do

var imgs = document.getElementsByTagName("img");

for (var i=0;i<imgs.length;i++){

    var id = imgs[i].id;

    // etc
}

But using the selectors is no doubt easier.

[riwakawd]

Is this correct?

<script type="text/javascript">
var imgs = document.getElementsByTagName("img");

function readURL(input) {
    for (var i=0;i<imgs.length;i++){
        var id = imgs[i].id;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
            $(id).attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
}

$("#file-input").change(function() {
    readURL(this);
});
</script>

[Traevel]

No I think your images will not exist yet when you try to collect them using var imgs = document.getElementsByTagName("img");. It depends on where you placed that script block in the code.

Try

function readURL(input) {
    $("img").each(function(){
        var img = this;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                img.attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    });
}

$("#file-input").change(function() {
    readURL(this);
});

You might have to use $(img).attr('src', e.target.result); instead though. I'm not 100% sure whether it will recognize the attr() without it. I can't test it for you at the moment.

[riwakawd]

I did that but or some reason the img that is showen over rides first one.

[Traevel]

What's the intended purpose? Are you trying to set multiple images to the same src given an input?

If so, the function I provided is a bit inefficient since it would read the same data over and over again for each img. The following would be better

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $("img").each(function(){
                $(this).attr('src', e.target.result);
            });
        }
        reader.readAsDataURL(input.files[0]);
    }
}

I don't know what you mean by the image being overriden as I thought that was the intention.

[riwakawd]

I have another script here on same file which allows me to create a new row and each img tag has id="example_and_auto_number" by clicking on a button. That's why I need the readUrl to pick up any id that is in img tag.

<table id="images" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-center">Image</td>
</tr>
</thead>
<tbody>
<?php $image_row = 0; ?>
<?php $image_row++; ?>
</tbody>
</table>
</div>
<script type="text/javascript">
var image_row = <?php echo $image_row; ?>;

function addImage() {
html  = '<tr id="image-row' + image_row + '">';
html  += '<td>';
html  += '<img id="example' + image_row + '" class="img-thumbnail" style="width: 100px; height:100px; cursor: pointer;" src="" data-toggle="popover">';
html  += '</td>';
html += '</tr>'; 
$('#images tbody').append(html);
image_row++;
}

$(document).ready(function() {
$('body').popover({
    selector: '[data-toggle="popover"]',
    placement: 'right',
    html: 'true',
    content: '<span class="btn btn-primary btn-file"><i class="fa fa-pencil"></i> <input onchange="readURL(this)"  id="file-input" type="file" name="userfile[]"/></span> <button  type="button" id="button-clear" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>'

    });
}); 
</script>
<script type="text/javascript">
        function readURL(input) {
    $('tr').each(function(){
    var img = this;
    if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
    $(img).attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
    }
    });
    }
    $("#file-input").change(function() {
    readURL(this);
    });
</script>

[Traevel]

But you would only need the id of the image you want to change then? Not get all the id's and override all of them with the new picture.

That looks like bootstraps popover, it contains the input I take it and then attaches it to the image rows?

You can find the popover that is currently visible using jQuery and then read the image id on the row the popover belongs to.

By default the popover should be in a div like <div class="popover more classes here" so you could find the active ones by doing $('div.popover:visible').

What might work even better, considering you're already passing the input element to the readURL function, is only to get the img that precedes the input, rather than all the images.

So something like:

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {

                $(input).prev("img.img-thumbnail")
                        .attr('src', e.target.result);

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

Where $(input).prev("img.img-thumbnail") should find the thumbnail image that directly precedes the input field.

[Troy III]

What do you need the ID's of the images for?

[DaniWebUser_1]

I don't know any PHP or jQuery, but I have started learning javascript, so this may or may not help you. What about getAttribute()? You can find some info on this here: http://www.w3schools.com/jsref/met_element_getattribute.asp

You can use setAttribute() to add an attribute and/or its' value. You can find more info on this method here: http://www.w3schools.com/jsref/met_element_setattribute.asp

I hope this at least sparked some new ideas for you.