前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Javascript上传图片转base64并预览,拿走不谢!

Javascript上传图片转base64并预览,拿走不谢!

作者头像
用户1272076
发布2019-03-26 17:31:41
9.3K0
发布2019-03-26 17:31:41
举报
文章被收录于专栏:张培跃

js中的FileReader结合input:file可以很方便的读取本地文件。不过要知道FileReader读取文件采用的是异步机制。

先来了解下input的file文件类型的使用:

代码语言:javascript
复制
  <input type="file" id="myimg"/>

input的file类型在浏览器中会渲染为一个按钮和一段文字。当你点击按钮时会打开文件选择窗口,文字表示对文件的描述;如图:

file类型的input会有files属性,保存着文件的相关信息。现在通过如下代码,打印其属性:

代码语言:javascript
复制
<div>
 <!--accept只能与file配合使用。它可以限制上传的文件类型
    当然你也可以写成 accept="image/*"-->
    <input type="file" id="myimg"
           onchange="imgChange(this)"
           accept="image/png,image/gif,image/jpeg"/>
</div>
<script>
    function imgChange(img) {
        console.log(img.files)
    }
</script>

以上代码通过accept属性可以控制文件的上传类型。现在上传一张名为zhangpeiyue.png的图片,效果及打印信息如下:

通过以上输出可知input.files是一个数组。每个file对象包含以下属性:

lastModified:数值,表示最后一次修改时间的毫秒数; lastModifiedDate:对象,表示最后一次修改时间的Date对象。 name:本地文件系统中的文件名; size:文件的字节大小; type:字符串,文件的MIME类型; weblitRelativePath:此处为空;当在input上加上webkitdirectory属性时,用户可选择文件夹,此时weblitRelativePath表示文件夹中文件的相对路径。该属性可自行尝试,哈!

FileReader

使用方法:

代码语言:javascript
复制
// 通过构造函数初始化一个FileReader对象
const reader = new FileReader();

常用事件:

代码语言:javascript
复制
// 事件在读取完成后触发。
FileReader.onload=function(ev){

}

常用方法:

代码语言:javascript
复制
// 开始读取指定的的内容。
// 一旦完成,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
FileReader.readAsDataURL();

接下来完成图片的转base64并预览效果:

html:

代码语言:javascript
复制
 <!--accept只能与file配合使用。它可以限制上传的文件类型
    当然你也可以写成 accept="image/*"-->
 <div>
     <input type="file" id="myimg"
            onchange="imgChange(this)"
            accept="image/png,image/gif,image/jpeg"/>
     <img width="300px"  src="" alt="">
 </div>

js:

代码语言:javascript
复制
function imgChange(img) {
    // 生成一个文件读取的对象
    const reader = new FileReader();
    reader.onload = function (ev) {
        // base64码
        var imgFile =ev.target.result;//或e.target都是一样的
        document.querySelector("img").src= ev.target.result;
    }
    //发起异步读取文件请求,读取结果为data:url的字符串形式,
    reader.readAsDataURL(img.files[0]);
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-01-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 张培跃 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • FileReader
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档