MDN中FileReader的详细介绍：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

用FileReader获取图片base64，并在页面预览：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <!-- 上传图片的input 绑定onchange事件-->

    <form action="">

        <input type="file" onchange="previewFile()" name="myfile" multiple="multiple"><br>

    </form>

    <!-- 预览的图片 -->

    <img src="" height="200" width="300" alt="Image preview..."/>

    <script type="text/javascript">

    function previewFile() {

        var preview = document.querySelector('img');

        // 选中file元素，并访问其files属性的第一个值

        var file  = document.querySelector('input[type=file]').files[0];

        //  console.log(document.querySelector('input[type=file]').files);

        //  console.log(document.querySelector('input[type=file]').files[0]);

        var reader = new FileReader();

        // 处理loadend事件，该事件在读取操作结束时（要么成功，要么失败）触发

        reader.onloadend = function () {

                console.log(reader.result)

                preview.src = reader.result;

        }

        // 读取指定的Blob中的内容，一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。

        reader.readAsDataURL(file);

    }

    </script>

</body>

</html>

用FileReader对象获取图片base64代码并预览的更多相关文章

  1. FileReader 获取图片BASE64 代码 并预览

    FileReader 获取图片的base64 代码 并预览 FileReader ,老实说我也不怎么熟悉.在这里只是记录使用方法. 方法名 参数 描述 abort none 中断读取 readAsBi ...

  2. H5 新特性之 fileReader 实现本地图片视频资源的预览

    大家好 !!  又见面了, 今天我们来搞一搞   H5的新增API    FileReader     真是一个超级超级方便的API呢!!!很多场景都可以使用.......... 我们先不赘述MDN文 ...

  3. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. Java通过图片url地址获取图片base64位字符串的两种方式

    工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...

  5. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  6. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. 项目总结07：JS图片的上传预览和表单提交（FileReader()方法）

    JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...

  8. angularjs图片上传和预览 base64

    angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...

  9. 小程序实现图片上传，预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

随机推荐

  1. Kudu的性能测试

    不多说,直接上干货! Kudu的性能测试 1.  kudu和parquet的比较   上图是官方给出的用Impala跑TPC-H的测试,对比Parquet和Kudu的计算速度.从图中我们可以发现,Ku ...

  2. Linux网卡操作

    单个网卡操作 [root@localhost ~]# ifdown eth0 #关闭网络 [root@localhost ~]# ifup eth0 #启动网络 网络服务: [root@localho ...

  3. [Android]JsonObject解析

    android和服务器进行交互的时候往往会有数据的传输,而数据中有一种类型就是Json型,这两天在研究API接口的问题,服务器返回的数据类型都是Json型的.例如: 1.接收到的json字符串分为两种 ...

  4. POJ 3694——Network——————【连通图，LCA求桥】

    Network Time Limit:5000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Stat ...

  5. 深入.NET框架。

    1.Microsoft.NET框架结构是一个面向网络,支持各种用户终端的开发平台. 2..NET框架的主要内容有CLR,FCL,ADO．NET,XML,ASP.NET,WinForms和WebSeri ...

  6. C#测试程序运行时间的方法

    C#测试程序运行时间的三种方法如下: (1)Datetime DateTime dtBegin = System.DateTime.Now;... DateTime dtEnnd = System.D ...

  7. 微信小程序电商实战-商品列表流式布局

    今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...

  8. The seventeenth day

    A good book is a good friend 好书如挚友

  9. 一道Java集合框架题

    问题:某班30个学生的学号为20070301-20070330,全部选修了Java程序设计课程,给出所有同学的成绩(可用随机数产生,范围60-100),请编写程序将本班各位同学的成绩按照从低到高排序打 ...

  10. Sharepoint 2013企业内容管理学习笔记终章

    说完了半自动化内容管理&全自动化内容管理,下面我们来说另外一个企业内容管理的东东吧 企业内容记录化 这个企业内容记录化,其实是我起的名字了,在sharepoint里面它叫做声明记录 这个声明记 ...