Determining the current ID of the element that called jquery/javascript function

Question

I am using the following jsfiddle code to determine uploaded image file's attributes. There are multiple file upload elements. I wish to know the current id of the element that has called the function so that I can use switch function. For example, if id = file1, then do this, elsif it is file2, then do this and so on. I used $(this).attr("id"), this.id; but none works.

$(window).load(function(){
    var _URL = window.URL || window.webkitURL;
    function displayPreview(files) {
        var reader = new FileReader();
        var img = new Image();
        reader.onload = function (e) {
            img.src = e.target.result;
            fileSize = Math.round(files.size / 1024);
            img.onload = function () {
                $('#preview').append('<img src="' + img.src + '">');
            }
        };
    reader.readAsDataURL(files);
    }
    $("#file1").change(function() {
        var file = this.files[0];
        displayPreview(file);
    });
    $("#file2").change(function() {
        var file = this.files[0];
        displayPreview(file);
    });
    $("#file3").change(function() {
        var file = this.files[0];
        displayPreview(file);
    });
});

This is the html code:

<input type="file" id="file1" /></br>
<input type="file" id="file2" /></br>
<input type="file" id="file3" /></br>
<div id="preview"></div>

So, how do I know the id of the current element which has called the function?

David L · Accepted Answer · 2013-11-07 04:43:16Z

2

You can capture the id of the element inside of your event handlers by using the event target

$("#file3").change(function(e) {
    var id = e.target.id;
    var file = this.files[0];
    displayPreview(file, id);
});

You will need to pass in "e" as the event in your anonymous function.

Alternatively, you can use a jQuery selector on this

var id = $(this).attr("id");

Once you have the id, pass it into your method.

displayPreview(file, id);

edited Nov 7, 2013 at 4:43

answered Nov 7, 2013 at 4:30

David L

34.1k8 gold badges70 silver badges98 bronze badges

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

2 Comments

sridhar Over a year ago

That did not work, however, that gave me an idea to make it workable. I did the following, and it worked for me.

$("#file3").change(function() {     var id = $(this).attr("id");     var file = this.files[0];     displayPreview(file,id); });

David L Over a year ago

@sridhar I'd be interested to know why it didn't work. But yes, that's an alternative. I'll update my answer to reflect it.

Collectives™ on Stack Overflow

Determining the current ID of the element that called jquery/javascript function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related