How to pass event data and id to javascript function

Question

Im using javascript to be able to display an image pre file upload but Im having this error...

I have a javascript function

function imageIsLoaded(e) {
    $('#image_preview_new').css("display", "block");
    var previewDiv = $('#previewing_new');
    previewDiv.attr('src', e.target.result);
}

and I am calling the function via another script, but I need to be able to pass both the event data as well as an id into that function but it doesn't seem to work...

This is what I am currently using and it works...

var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);

This is what I've been trying and it doesn't work. If try and pass the id and the event data (e, id) it tells me that "e is not defined"...

var reader = new FileReader();
reader.onload = imageIsLoaded(e, id);
reader.readAsDataURL(this.files[0]);

function imageIsLoaded(e, id) {
    $('#image_preview_new').css("display", "block");
    var previewDiv = $('#previewing_new');
    previewDiv.attr('src', e.target.result);
}

How can I get the event data as well as an id into this function.

Thanks.

what is id? you didn't use it in the function.

Aᴍɪʀ
– Aᴍɪʀ

2015-12-21 04:54:45 +00:00
Commented Dec 21, 2015 at 4:54 — Aᴍɪʀ
– Aᴍɪʀ, Commented Dec 21, 2015 at 4:54
stackoverflow.com/questions/16937223/…

Microfed
– Microfed

2015-12-21 04:56:21 +00:00
Commented Dec 21, 2015 at 4:56 — Microfed
– Microfed, Commented Dec 21, 2015 at 4:56

guest271314 · Accepted Answer · 2015-12-21 04:59:18Z

3

Use .change() event, Function.prototype.bind()

function imageIsLoaded(id, e) {
  // `id` : `"abc"` , `e` : `event`
  console.log(id, e);
  // do stuff with `id`
  var previewDiv = $("#" + id);
  previewDiv.attr("src", e.target.result);
}

$(":file").change(function() {
  var reader = new FileReader();
  // set `this` to `reader` at first parameter to `.bind()`
  // pass `id` : `"abc"` at second parameter `.bind()` , 
  // called at `imageIsLoaded`
  reader.onload = imageIsLoaded.bind(reader, "abc");
  reader.readAsDataURL(this.files[0]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file">
<br />
<img id="abc" />

edited Dec 21, 2015 at 4:59

answered Dec 21, 2015 at 4:54

guest271314

1

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

Collectives™ on Stack Overflow

How to pass event data and id to javascript function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related