Javascript将上传的图片,实时显示到页面中

小汤猿人类

已于 2024-08-27 23:00:12 修改

阅读量306

点赞数 4

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-08-22 11:26:46 首次发布

本文链接：https://blog.csdn.net/a1241436267/article/details/141423753

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

  // 当用户选择文件时，触发该事件
    document.querySelector('#companyLicPic').onchange = () => {
        // 检查是否有文件被选中
        if (this.files.length) {
            let file = this.files[0]; // 获取选中的文件
            let reader = new FileReader(); // 新建 FileReader 对象
            // 当 FileReader 完成文件读取时，触发该事件
            reader.onload = () => {
                // 将读取到的文件内容赋值给图片的src属性，以显示图片
                document.querySelector('#showCompanyLicPic').src = this.result;
            };
            // 设置以Data URL方式读取文件，通常用于读取小文件或图片
            reader.readAsDataURL(file);
            // 显示带有图片的元素
            $('#showCompanyLicPic').css('display', 'inline-block')
            // 隐藏提示未选择文件的元素
            $('#companyLicPicNull').css('display', 'none')
        }

    }