選擇並顯示文件閱讀器不起作用的圖像

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>

未注釋的代碼不是我的，而是來自於本教程 - 本教程也無法正常工作。

有人可以向我解釋為什么不顯示圖像嗎？ 非常感謝。

Answer 1

call是函數上的方法。 如果在函數末尾附加() ，則將在函數返回而不是函數本身上進行操作。
因此，您的代碼應為

showImage.call(this)