用FileReader对象获取图片base64代码并预览
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代码并预览的更多相关文章
- FileReader 获取图片BASE64 代码 并预览
FileReader 获取图片的base64 代码 并预览 FileReader ,老实说我也不怎么熟悉.在这里只是记录使用方法. 方法名 参数 描述 abort none 中断读取 readAsBi ...
- H5 新特性之 fileReader 实现本地图片视频资源的预览
大家好 !! 又见面了, 今天我们来搞一搞 H5的新增API FileReader 真是一个超级超级方便的API呢!!!很多场景都可以使用.......... 我们先不赘述MDN文 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 项目总结07:JS图片的上传预览和表单提交(FileReader()方法)
JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...
- angularjs图片上传和预览 base64
angularjs图片上传和预览 思路是从file中读取base64 Module.controller('controlName', ['$scope', '$http', function($sc ...
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
随机推荐
- Kudu的性能测试
不多说,直接上干货! Kudu的性能测试 1. kudu和parquet的比较 上图是官方给出的用Impala跑TPC-H的测试,对比Parquet和Kudu的计算速度.从图中我们可以发现,Ku ...
- Linux网卡操作
单个网卡操作 [root@localhost ~]# ifdown eth0 #关闭网络 [root@localhost ~]# ifup eth0 #启动网络 网络服务: [root@localho ...
- [Android]JsonObject解析
android和服务器进行交互的时候往往会有数据的传输,而数据中有一种类型就是Json型,这两天在研究API接口的问题,服务器返回的数据类型都是Json型的.例如: 1.接收到的json字符串分为两种 ...
- POJ 3694——Network——————【连通图,LCA求桥】
Network Time Limit:5000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Stat ...
- 深入.NET框架。
1.Microsoft.NET框架结构是一个面向网络,支持各种用户终端的开发平台. 2..NET框架的主要内容有CLR,FCL,ADO.NET,XML,ASP.NET,WinForms和WebSeri ...
- C#测试程序运行时间的方法
C#测试程序运行时间的三种方法如下: (1)Datetime DateTime dtBegin = System.DateTime.Now;... DateTime dtEnnd = System.D ...
- 微信小程序电商实战-商品列表流式布局
今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...
- The seventeenth day
A good book is a good friend 好书如挚友
- 一道Java集合框架题
问题:某班30个学生的学号为20070301-20070330,全部选修了Java程序设计课程,给出所有同学的成绩(可用随机数产生,范围60-100),请编写程序将本班各位同学的成绩按照从低到高排序打 ...
- Sharepoint 2013企业内容管理学习笔记终章
说完了半自动化内容管理&全自动化内容管理,下面我们来说另外一个企业内容管理的东东吧 企业内容记录化 这个企业内容记录化,其实是我起的名字了,在sharepoint里面它叫做声明记录 这个声明记 ...