Javascript 在FileReader不工作的情况下选择并显示图像

我有一个表单，用户可以先选择，然后上传图像。应在下面的图像标记中预览所选图像

我的HTML设置（仅必要部分）：

形象

我在下面有一个脚本标记，在这里我正在编写我的函数do render the selected image，如下所示：

<script>

        function showImage (){
            if (this.files && this.files[0]){
                let r = new FileReader();
                r.onload = ((data) => {
                   let img = document.getElementById("imgPreview");
                   img.src = data.target.result;
                   img.style.display = "block";
                });
                r.readAsDataURL(this.files[0]);
            }
        }

        // tried previously but still doesnt work
        // function readURL(inputStr){
        //     if (inputStr.files && inputStr.files[0]){
        //         let fileReader = new FileReader();
        //         fileReader.onload = (data)=> {
        //             $('#imgPreview').attributes('src', data.target.result).width(100).height(100);
        //         }
        //         fileReader.readAsDataURL(inputStr.files[0]);
        //     }
        // }
        //
        // $('#img').change( ()=>{
        //     console.log(`Image Clicked`);
        //     readURL(this);
        // });

    </script>

函数showImage（）{
if（this.files&&this.files[0]）{
设r=newfilereader（）；
r、 onload=（（数据）=>{
设img=document.getElementById（“imgPreview”）；
img.src=data.target.result；
img.style.display=“块”；
});
r、 readAsDataURL（this.files[0]）；
}
}
//以前尝试过，但仍然不起作用
//函数readURL（inputStr）{
//if（inputStr.files&&inputStr.files[0]）{
//让fileReader=newFileReader（）；
//fileReader.onload=（数据）=>{
//$（'#imgPreview'）。属性（'src'，data.target.result.）。宽度（100）。高度（100）；
//         }
//fileReader.readAsDataURL（inputsr.files[0]）；
//     }
// }
//
//$（'#img'）。更改（（）=>{
//log（`Image Clicked`）；
//readURL（this）；
// });

未注释的代码不是我的，而是来自教程，但也不起作用

有人能给我解释一下为什么不显示图像吗？

---

非常感谢。

调用

是函数上的一种方法。如果在函数末尾附加

（）

，则操作的是函数的返回，而不是函数本身。
因此，您的代码应该是

showImage.call(this)

---

call

是函数的一种方法。如果在函数末尾附加

（）

，则操作的是函数的返回，而不是函数本身。
因此，您的代码应该是

showImage.call(this)