如何用JavaScript实现用户选择本地图片后自动修改页面图片URL？

现有代码问题清单 #

• 事件绑定错误：当前绑定的onclick/onkeyup不会在用户选择文件后触发，需替换为onchange事件
• 元素ID不匹配：JS中查询的图片ID是profileAAImage，但HTML中图片实际ID为profileImage，导致找不到目标元素
• 错误使用文件输入的value属性：浏览器出于安全限制，input[type=file]的value是虚拟路径，无法直接作为图片地址使用，需通过FileReader读取本地文件生成临时预览地址
• src属性用法错误：src是图片元素的属性，需要直接赋值，而非作为方法调用
• 缺少文件类型校验：未限制用户选择的文件类型，可能出现非图片文件无法预览的问题

修改后代码 #

HTML部分 #

<div class="row">
    <div class="col-md-3 form-group" style="padding-left: 7%;">
        <img  id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100" >
    </div>
    <div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
        <input  type="file" name="file"  class="form-control" id="profileLocation" onchange="changeProfile()" accept="image/*" placeholder="select profile image" required>
    </div>
</div>

JS部分 #

function changeProfile(){
    // 获取文件输入元素
    const fileInput = document.getElementById("profileLocation");
    // 判断是否选中了文件
    if (fileInput.files && fileInput.files[0]) {
        // 校验文件类型为图片
        if (!fileInput.files[0].type.startsWith('image/')) {
            alert('请选择图片类型的文件');
            return;
        }
        // 创建FileReader读取文件
        const reader = new FileReader();
        // 读取完成后赋值给图片src
        reader.onload = function (e) {
            const profileImg = document.getElementById("profileImage");
            profileImg.src = e.target.result;
        }
        // 读取文件为base64预览地址
        reader.readAsDataURL(fileInput.files[0]);
    }
}

内容的提问来源于stack exchange，提问作者user17048286