图像上传按钮->图片显示

<input type="file" id="fileInput">
<div id="imageContainer">
    <img id="uploadImage" alt="Upload Image">
</div>

<script>
//1.获取页面元素
const fileInput = document.getElementById("fileInput")
const imageContainer = document.getElementById("imageContainer")
const uploadImage = document.getElementById("uploadImage")
//2.对文件上传建立监听器，元素为input元素
fileInput.addEventListener('change', handleFileUpload);
//3.处理文件上传事件的回调函数，也就是一旦触发上传事件就获取图片然后展示
function handleFileUpload(event){
    const selectedFile = event.target.files[0]
    if(selectedFile){
        //创建FileReader对象来读取文件内容
        const reader = new FileReader()
        //当文件读取完成后执行回调函数
        reader.onload = function(e){
            //设置图片的src，属性为读取道德文件内容
            uploadImage.src = e.target.result
            //显示图片容器
            imageContainer.style.display = 'block'
        }
    }
}


</script>