使用FileReader不工作选择和显示图像

Question

我有一个表单，其中包含用户首先选择，然后上传图像的选项。应在下面的图像标签中预览所选图像。

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

<div class="form-group">
            <label for="">Image</label>
            <input type="file" accept="image/*" name="image" id="selImg" class="form-control" onchange="showImage().call(this)">
            <img src="#" id="imgPreview" style="display: none; height: 200px; width: 200px">
        </div>

我在这下面有一个脚本标签，我正在编写我的函数，如下所示渲染所选图像：

<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>

未注释的代码不是我的，但是教程 - this tutorial但也不起作用。

有人可以向我解释为什么图像不显示？非常感谢。

Answer 1

call是一个函数的方法。如果在函数末尾附加()，则将在函数返回时操作，而不是函数本身。 因此你的代码应该是

showImage.call(this)