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

Question

我使用 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 获取到此函数中。

谢谢。

Answer 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" />