javascript - 从文件上传元素发送 'this' 到 js 函数

Question

我正在上传图像。 onClick 一个可见按钮，它会触发隐藏的输入表单(它是隐藏的，因为它很难看)，它要求用户选择一个文件。做出选择后，它会触发 onChange="imagePreview(this);" 函数，然后该函数与“this”元素一起使用。

function imagePreview (this) {
   var files = this.files;
   var file = files[0];
   ...
}

我想做的是摆脱在 html 元素中插入 onChange="imagePreview(this);" ，所以我需要以某种方式从 javascript 调用这个元素或jQuery。有人可以给我一点提示吗？

Answer 1

只需获取元素并使用addEventListener或jQuery的.change方法来设置事件监听器

HTML

<input type="file" id="myfile" />

JS

function imagePreview(){
   //The context of the function will
   //be the element that triggered it
   var files = this.files;
   var file = files[0];    
}

var fileCtrl = document.getElementById("myfile");
fileCtrl.addEventListener("change",imagePreview);
//jQuery
$("#myfile").change(imagePreview);

jQuery .change

addEventListener