上传图片的预览

最新推荐文章于 2021-07-05 15:00:39 发布

baby加油_

最新推荐文章于 2021-07-05 15:00:39 发布

阅读量224

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：上传图片预览 URL.createObjectURL FileReader

本文链接：https://blog.youkuaiyun.com/qq_34664239/article/details/94569869

js 专栏收录该内容

68 篇文章

订阅专栏

本文介绍如何使用JavaScript将本地文件转换为Base64字符串或URL，以便在网页中显示图片。提供了两种方法：一是利用URL.createObjectURL()创建本地文件的URL，二是使用FileReader的readAsDataURL()方法读取文件并转换为Base64格式。

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

两种方法

URL.createObjectURL(obj);

这个函数（window的方法）创建出路径，浏览器能通过原生接口访问本地文件的路径，其中window可以省略，参数为需要创建路径的对象（file对象或者Blob对象）;

var imgUrl = URL.createObjectURL( this.files[0] ); //生成本地路径图片
document.querySelector('img').src = imgUrl ;
URL.revokeObjectURL(_file); // 释放这个url

用FileReader的readAsDataURL方法

var reader = new FileReader();
reader.readAsDataURL(_file);
reader.onload = function(){
    console.log(reader.result); //生成base64格式图片
};

具体写法案例：

<body>
    <input type="file" name="imgfile" id="imgfile">
    <script>
        document.getElementById('imgfile').onchange = function(){
            console.log(this.files[0])
            reads(this.files[0]);
        }
        function reads(_file){
          //var imgUrl = URL.createObjectURL( _file );
		  //document.querySelector('img').src = imgUrl ;
		  //URL.revokeObjectURL(_file); 
		
          var reader = new FileReader();
          reader.readAsDataURL(_file);
          reader.onload = function(){
              document.getElementById("img").src= reader.result;
          };
        }
    </script>
</body>