专栏首页张培跃Javascript上传图片转base64并预览,拿走不谢!

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

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

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

  <input type="file" id="myimg"/>

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

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

<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

使用方法:

// 通过构造函数初始化一个FileReader对象
const reader = new FileReader();

常用事件:

// 事件在读取完成后触发。
FileReader.onload=function(ev){

}

常用方法:

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

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

html:

 <!--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:

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]);
}

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何考评一名前端工程师

    一周有五天工作日,其过法在这周之前都是在写代码和喝咖啡(顺便休息一下)的来回切换中度过的;然而,本周加入了新的元素——面试。工作日的一半以上都有面试,每次在与应...

    用户1272076
  • React之组件

    首先我们通过函数来创建一个组件,函数的名字即是组件的名字!另外有两个地方需要特别注意:

    用户1272076
  • 编程界神级人物聚于这里,带你领略什么叫聪明的脑袋不长毛

    2011年,在乔布斯逝世仅7天后,这位C语言之父也走了,但似乎世人只记住了乔布斯,对丹尼斯·里奇这位给乔布斯提供了肩膀的巨人好像并没有太多的印象。

    用户1272076
  • 我的<input />不可能这么可爱

    <input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选...

    陈大鱼头
  • python案例-for循环

    编写一个程序,让用户输入3个数字:(f)rom,(t)o和(i)ncrement。以i为步长,从f计数到t,包括f和t。例如,如果输入的是f = 2,t = 2...

    py3study
  • my97DatePicker选择年、季度、月、周、日

    <input id="d1212" class="Wdate" type="text" onfocus="WdatePicker({dateFmt:'yyyy年...

    一笠风雨任生平
  • 面向对象思想的设计原则概述

    在实际的开发中,我们要想更深入的了解面向对象思想,就必须熟悉前人总结过的面向对象思想的设计原则。

    黑泽君
  • linux之文件目录类相关的指令

    ls:显示文件或目录,带上-a表示加上显示隐藏目录或文件,加上-l表示以列表显示。

    绝命生
  • Ktorm - 让你的数据库操作更具 Kotlin 风味

    在开始之前,我们先回顾一下上篇文章中的员工-部门表的例子,这次我们的示例也是基于这两个表。下面是使用 Ktorm 定义的这两个表的结构:

    bennyhuo
  • 一篇文章看懂mysql中varchar能存多少汉字、数字,以及varchar(100)和varchar(10)的区别

    一般初学会认为,二者占用的空间是一样的。比如说我存储5个char,二者都是实际占用了5个char了【不准确的想法:varchar在实际存储的时候会多一个byte...

    NateHuang

扫码关注云+社区

领取腾讯云代金券