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. Unity Resources.Load

    GameObject bulletPrefab; void Start() {   bulletPrefab = Resources.Load("bulletPrefab")  a ...

  2. Oozie安装部署

    不多说,直接上干货! 首先,大家先去看我这篇博客.对于Oozie的安装有一个全新的认识. Oozie安装的说明 我这里呢,本篇博文定位于手动来安装Oozie,同时避免Apache版本的繁琐编译安装,直 ...

  3. 二叉搜索树-php实现 插入删除查找等操作

    二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的 ...

  4. http request 字段

    Accept: 客户端支持的文件类型, 如果为/表示任何类型 Accept-Encoding: 客户端浏览器支持的文件压缩格式 Accept-Language: 客户端支持的语言 User-Agent ...

  5. Facebook TSDB论文Gorilla分析

    Facebook TSDB论文Gorilla分析 背景 TSDB时序数据库用于存储时间相关的数据,常用于监控系统的数据存储,分布式的TSDB提供了海量的数据存储能力,如InfluxDB.OpenTSD ...

  6. Javascript学习一Object

    构造函数 new Object() new Object(value) 参数 value     可选的参数,声明了要转换成Number对象.Boolean对象或String对象的原始值(即数字.布尔 ...

  7. 让GIt忽略SSL证书错误的方法

    当你通过HTTPS访问Git远程仓库,如果服务器的SSL证书未经过第三方机构签署,那么Git就会报错.这是十分合理的设计,毕竟未知的没有签署过的证书意味着很大安全风险.但是,如果你正好在架设Git服务 ...

  8. 通用代码——makefile文件

    ver=debug ifeq ($(ver),debug) TARGET = testmain_d FLAG=-g -D debug else TARGET = testmain_r FLAG=-O3 ...

  9. XHTML教会我的一些东西-1

    第一次写博客,虽然以前写作文是我的强项,我也很能说,但是似乎现在这种能力正在退化.不知为什么,到了大学之后我就变得跟以前不一样,似乎是回到了小学时的我.我在大学开始变得内向.沉默.不去主动和别人交谈. ...

  10. [原创] Debian9上配置Samba

    Samba概述 Samba是一套使用SMB(Server Message Block)协议的应用程序,通过支持这个协议,Samba允许Linux服务器与Windows系统之间进行通信,使跨平台的互访成 ...