如何将事件数据和 id 传递给 javascript 函数答案

【问题标题】：How to pass event data and id to javascript function如何将事件数据和 id 传递给 javascript 函数
【发布时间】：2016-03-27 03:18:05
【问题描述】：

我使用 javascript 能够显示图像预文件上传，但我有这个错误......

我有一个javascript函数

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

我正在通过另一个脚本调用该函数，但我需要能够将事件数据和 id 都传递给该函数，但它似乎不起作用......

这是我目前正在使用的，它可以工作......

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

这是我一直在尝试的，但它不起作用。如果尝试传递 id 和事件数据（e，id），它会告诉我“e 未定义”...

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);
}

如何将事件数据和 id 获取到此函数中。

谢谢。

【问题讨论】：

什么是id？你没有在函数中使用它。
stackoverflow.com/questions/16937223/…

标签： javascript jquery

【解决方案1】：

使用.change()事件，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" />

【讨论】：