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. Django自定义过滤器

    1.首先在在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.在app中创建templatetags模块(模块名只能是temp ...

  2. jq回到顶部效果分析

    在浏览网页时,超出屏幕高度就会出现提上点击回到顶部的图标,点击即可回到页面顶部. 用到的知识点如下: 1.首先控制图标的显示和隐藏,先要获取浏览器的高度. var wHeight = $(window ...

  3. 错误处理(Operation Result)方法

    自己开发的公众号,可以领取淘宝内部优惠券 问题 现在有一个FileStorageService类,继承自IStorageService,具体实现如下 public interface IStorage ...

  4. wait/notify

    某面试题,实现一个生产者——消费者模型 题目:采用多线程技术,通过wait/notify,设计实现一个符合生产者和消费者问题的程序,对某一个对象(枪膛)进行操作,其最大容量是20颗子弹,生产者线程是一 ...

  5. spring mvc改造成spring boot

    一.新增依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  6. 浅谈position、table-cell、flex-box三种垂直（水平）居中技巧

    一.首先是喜闻乐见的position方法,经典且万能,用法如下: 父元素{ position:relative; } 子元素{ position:absolute; top:50%; left:50% ...

  7. <Android 基础（十二）> TextInputLayout，让输入框更有灵性

    介绍 Layout which wraps an {@link android.widget.EditText} (or descendant) to show a floating label wh ...

  8. 什么是TOPO学

    拓扑,一个跟门萨同样古怪的“科技Word”.其定义,对绝大多数读者而言,不一定需要理解,但无妨知道———拓扑学,数学的一门分科,研究几何图形在一对一的双方连续变换下不变的性质.不少门萨题,来自拓扑学, ...

  9. RAL调用

    [RPC的定义].RPC的全称为 Remote Procedure Call(远程过程调用).远程过程调用是一个计算机通信协议.该协议允许运行于一台计算机的程序调用另一台计算机的子程序,而程序员无需额 ...

  10. Row_number() OVER(PARTITION BY xxx ORDER BY XXX）分组排序

    --//创建一个信息表 ,) ,),st_name ),class ),score ,)) --//插入测试数据============start=================== insert ...