大事件 - 实现图片效果预览

最新推荐文章于 2024-11-02 12:42:04 发布

Henry_ww

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量165

点赞数

分类专栏：前端文章标签： javascript html html5

本文链接：https://blog.csdn.net/Henry_ID/article/details/120233516

版权

文件预览动态渲染 URL.createObjectURL img标签事件委托

关键词由CSDN通过智能技术生成

前端专栏收录该内容

19 篇文章 4 订阅

订阅专栏

1.获取文件数据
2.根据文件数据生成一个路径
3.将路径赋值给img标签的src属性

/ 实现文件预览
    // 动态渲染，事件委托
    $('.common_con').on('change', '#exampleInputFile', function () {
        // console.log(123);
        // 1.获取文件数据
        let myfile = this.files[0];
        console.log(this.files);
        // 2.根据文件数据生成一个路径
        let myurl = URL.createObjectURL(myfile);
        // 3.将路径赋值给img标签的src属性
        $('.user_pic').prop('src', myurl);
    });