我只有一个输入来上传图片。
HTML
<main>
<input id="hs-p" type="file" accept="image/*" capture="camera">
</main>
<script type="text/javascript">
let hsp = new HPS();
</script>
我想听听这个输入何时发生变化(当有人为其添加图像时)。
JS
let imageInput = null;
class HSP {
constructor() {
this.imageInput = document.getElementById('hs-p');
if (this.imageInput) {
this.imageInput.addEventListener("change", this.uploadImage());
}
}
uploadImage() {
console.log("upload image", this.imageInput);
}
}
module.exports = HSP;
当有人添加图片时,应调用uploadImage callaback。但是,此功能仅在页面加载时触发一次,并且在我将图像添加到输入或更改输入图像时从不触发。
我正在使用node&amp; webpack输出上面的自定义库/ sdk然后导入我的html。
答案 0 :(得分:2)
将您的活动更改为:
this.imageInput.addEventListener("change", () => this.uploadImage());
或者对此:
this.imageInput.addEventListener("change", this.uploadImage.bind(this));
您正在做的是调用uploadImage
并将结果传递给侦听器。您希望将引用传递给侦听器。
答案 1 :(得分:0)
将this.imageInput.addEventListener("change", this.uploadImage());
更改为this.imageInput.addEventListener("change", this.uploadImage);
(在this.uploadImage之后删除了())。