获取file input里的图片并预览

最新推荐文章于 2024-09-10 10:09:23 发布

原创最新推荐文章于 2024-09-10 10:09:23 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

JQ 专栏收录该内容

2 篇文章

订阅专栏

本文介绍两种预览图片的方法：FileReader和URL.createObjectURL。FileReader适用于一般编辑器，而URL.createObjectURL为浏览器自带接口，性能更优。通过jQuery实现封面图实时更新，使用readAsDataURL将文件转换为Base64格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

读取URL有filereader 和 URL.createObjectURL 两种预览方式。

URL.createObjectURL 有浏览器自带的接口（不同浏览器接口不同），所以性能较好，但我在谷歌试了一次，没效果就用了filereader，这个方法在一般的编辑器里也用来读取来上传图片。

//封面图显示更新
$("#fileImg").change(function () {
    var rd=new FileReader();  //创建文件读取对象
    var file=document.getElementById("fileImg").files[0];
    rd.readAsDataURL(file);  //读取类型为base64
    rd.onload=function (ev) {
        document.getElementById('fileImgLink').src=this.result;
    }
});

JQ形式：$("#fileImg").change(function () {
    var rd=new FileReader();  //创建文件读取对象
    var file=$(this)[0].files[0];
    rd.readAsDataURL(file);  //读取类型为base64
    rd.οnlοad=function (ev) {
        $("#fileImgLink")[0].src=this.result;
    }
});