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. [转]jQuery Mobile动态刷新页面样式

    本文转自:http://blog.csdn.net/zht666/article/details/8560765 当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控 ...

  2. web service, wcf, wcf rest, web api之间的区别

    在.NET Framework中,有很多种技术可以创建基于http协议的服务,譬如说web service, wcf,wcf rest和web api等等.网上有很多的文章教我们如何开发.使用这几种技 ...

  3. Makefile2

    规范 target可以是Object file, 可执行文件或者标签(标签一般没有依赖) 越靠近最终结果的target卸载越前面 定义target前, 定义CC, SRC, CFLAGS, OBJS, ...

  4. winfrom C#树勾选等

    AfterCheck /// <summary> /// 树勾选 /// </summary> /// <param name="sender"> ...

  5. AOP切面编程

    1.JDK动态代理方式实现 public static UserService createService(){ //目标类 final UserService userService = new U ...

  6. dom父节点

  7. SASS简介及使用方法

    一.什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具,它允许你使用变量.条件语句等,使开发更简单可维护.这里是官方文档. 二. ...

  8. Smile with face. Smile with mind.

    Smile with face. Smile with mind.微笑不仅是挂在脸上的,更是发自心底的.

  9. js获取农历日期【转】

    var CalendarData=new Array(100); var madd=new Array(12); var tgString="甲乙丙丁戊己庚辛壬癸"; var dz ...

  10. arm寄存器解析

    寒假闲来无事准备将自己的走过的arm之路总结一下,今天就先从arm的寄存器说起吧,欢迎各位拍砖. 要介绍arm寄存器之前我们要先了解一下arm处理器的工作模式: Arm处理器有七种工作模式,为的是形成 ...