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. Python札记1--基础

    Python语言虽然简单,但相关的细节仍需要注意,本系列札记,旨在记录学习python过程中需要注意的相关知识点或相关难点的理解. 1. 列表 a. python的列表list中元素的类型可以不同 b ...

  2. CSS零碎知识点

    一.zoom:1 IE专有属性 可以设置或检索对象的缩放比例 触发IE的layout属性 清除浮动:overflow:hidden;zoom:1; 但要尽量比较使用这种方法 zoom:1;可以拯救IE ...

  3. Python四大神兽（迭代器&生成器&闭包&装饰器）

    一.迭代器 迭代是Python最强大的功能之一,是访问集合元素的一种方式.. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不 ...

  4. 对于ESP、EBP寄存器的理解

    原文:http://blog.csdn.net/yeruby/article/details/39780943 esp是栈指针,是cpu机制决定的,push.pop指令会自动调整esp的值: ebp只 ...

  5. Mysql远程连接授权IP

    新增法   我们现在增加一个'username'用户,密码为'password',让其能够从外部访问MYSQL. grant all on * to 'username' identified by ...

  6. java NIO、BIO、AIO全面剖析

    在高性能的IO体系设计中,有几个名词概念常常会使我们感到迷惑不解.具体如下: 序号 问题 1 什么是同步? 2 什么是异步? 3 什么是阻塞? 4 什么是非阻塞? 5 什么是同步阻塞? 6 什么是同步 ...

  7. Struts2_动态结果集

    页面请求: <li><a href="user/user?type=1">返回success</a></li> <li> ...

  8. Lubuntu , ubuntu 搜索文件

    使用命令行方式搜索 $ locate your_filename

  9. .net core 操作域控 活动目录 ladp -- Support for System.DirectoryServices for Windows

    原文链接:https://github.com/dotnet/corefx/issues/2089 1. @ianhays to kick start the project in CoreFX re ...

  10. pat甲级1107

    1107 Social Clusters (30 分) When register on a social network, you are always asked to specify your ...