FileReader生成图片dataurl的分析
相关代码及html(来源:百度百科)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>DataUrlBuilder</title>
</head>
<body>
<p>利用HTML5的FileReader生成dataurl</p>
<input type="file" value="" onchange="BuildDataUrl(this)" style="border:1px solid black;width:300px">
<br>
<textarea name="" id="txtBase64" cols="50" rows="30"></textarea>
<img id="imgView" src="" style="width:300px">
<script type="text/javascript">
function BuildDataUrl(source){
var file = source.files[0];
if(window.FileReader){
var fr = new FileReader();
fr.onloadend = function(e){
document.getElementById("txtBase64").value=e.target.result;
document.getElementById("imgView").src=e.target.result;
};
fr.readAsDataURL(file);
}
}
</script>
</body>
<html>
File API及FileReader简介
参考资料
1.[File接口][https://developer.mozilla.org/zh-CN/docs/Web/API/File]
2.[FileReader接口][https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader]
3.[FileList接口][https://developer.mozilla.org/zh-CN/docs/Web/API/FileList]
4.[DataTransfer接口][https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer]
总结:
1.File接口提供文件信息,并允许网页js访问其中内容
2.File对象的来源可能是:
- input元素上选择文件后返回的 FileList对象(InuputElement.files)
- 自由拖放操作生成的 DataTransfer 对象
- 来自 HTMLCanvasElement上的
mozGetAsFile() API
3.FileList对象: File对象的一个列表
访问方法: FileList[index] 或 FileList.item(index)
4.FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File或 Blob对象指定要读取的文件或数据.
5.FileReader对象的属性,方法,事件处理:
属性
FileReader.error(只读): 表示在读取文件时发生的错误
FileReader.readyState(只读): 表示
FileReader读取状态的数字常量名 值 含义 EMPTY 0 尚未加载任何数据 LOADING 1 数据正在加载中 DONE 2 已完成全部加载请求 FileReader.result(只读): 上一次读取的文件的内容(仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作--这是用FileReader将图片转换为dataurl的关键)
方法
- FileReader.abort(): 中止读取,返回时readyState设为DONE
- FileReader.readAsArrayBuffer(): 读取指定Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer数据对象
- FileReader.readAsDataURL(): 读取指定Blob中的内容, 一旦完成, result 属性中将包含一个data:URL格式字符串表示所读内容
- FileReader.readAsText(): 读取指定Blob中的内容, 一旦完成, result 属性中将包含一个字符串表示所读内容
事件
| 事件 | 触发时机 |
|---|---|
| FileReader.onabort | 读取被中断 |
| FileReader.onerror | 读取出错 |
| FileReader.onload | 读取成功 |
| FileReader.onloadstart | 开始读取时 |
| FileReader.onloadend | 读取完毕(成功/失败) |
| FileReader.onprogress | 读取过程中 |
注:FileReader继承自EventTarget，所以所有这些事件也可以通过addEventListener方法使用。
结合补充知识进行代码分析
<input type="file" value="" onchange="BuildDataUrl(this)" style="border:1px solid black;width:300px">
用input元素(type为file),通过选择文件获取File对象列表并为之绑定onchange事件.当选择文件时,input输入域内容改变,调用dataurl的产生函数BuildDataUrl()
function BuildDataUrl(source){
var file = source.files[0]; //通过input的files属性获取选择的文件对应的File对象
if(window.FileReader){ //浏览器支持检测
var fr = new FileReader(); //构造一个FileReader对象fr
fr.onloadend = function(e){ //为fr对象绑定onloadend事件(当文件读取完毕时触发,此时result已经获取了加载内容)
document.getElementById("txtBase64").value=e.target.result; //e.target等同于this
document.getElementById("imgView").src=e.target.result;
};
fr.readAsDataURL(file); //以data:URL格式读取选择的文件,读取完毕时触发fr的onloadend事件
}
}
修改尝试: 拖曳图片到网页完成转换
1.实质: 修改File对象的来源及输入方式
2.知识补充:
[DataTransfer接口][https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer]
[html拖放API][https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API]
[html5拖放][http://www.w3school.com.cn/html5/html_5_draganddrop.asp]
总结:
1.DataTransfer对象: 在进行拖放操作时,用来保存,通过拖放动作,拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。
我们用到的属性: files--拖动文件时的有效文件列表(不涉及文件拖动时,此列表为空)
2.DataTransfer对象的获取: 在拖动事件的事件对象event中的dataTransfer属性中保存
3.拖放操作涉及的步骤:
- 设置元素为可拖放(draggable 属性设置为 true)
- 拖动什么 - ondragstart 和 setData()设置被拖数据
- 放到何处 - ondragover(需要取消事件的默认操作)
- 进行放置及数据处理 - ondrop(需要取消事件的默认操作)
3.我们本次尝试只涉及到最后两步,代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>DataUrlBuilder</title>
</head>
<body>
<p>利用HTML5的FileReader生成dataurl</p>
<div style="width:300px;height:100px;border:1px solid black;text-align:center;" ondragover="allowDrop(event)" ondrop="drop(event)">拖曳图片到此处完成转换</div>
<img id="imgView" src="" style="width:300px" alt="图片预览">
<textarea name="" id="txtBase64" cols="50" rows="30"></textarea>
<script type="text/javascript">
function BuildDataUrl(source){
var file = source.files[0];
if(window.FileReader){
var fr = new FileReader();
fr.onloadend = function(e){
document.getElementById("txtBase64").value=this.result;
document.getElementById("imgView").src=this.result;
};
fr.readAsDataURL(file);
}
}
function allowDrop(event){
event.preventDefault();
}
function drop(event){
event.preventDefault();
BuildDataUrl(event.dataTransfer);
}
</script>
</body>
</html>
4.代码分析:
- div元素设置被拖动文件的放置区
- 绑定事件ondragover来允许文件的放置(取消事件默认行为)
- 绑定事件ondrop来进行文件放置后的数据转处理
- img元素设置图片的预览区
- script元素--js代码:
- 函数BuildDataUrl()保持不变
- 函数allowDrop()--ondragover事件的触发函数
- 函数drop()--ondrop事件的触发函数: 通过event.dataTransfer属性获取DataTransfer对象,并以之作为参数调用BuildDataUrl函数
FileReader生成图片dataurl的分析的更多相关文章
- web前端之文件上传
前言 最近太忙一直没时间认真的写博客(哈哈哈),最近pm提一个需求,移动端需要一个上传图片的功能,允许多选.删除.预览.点击查看大图并可以滑动.虽然听起来很多,但是这个功能在web上实现过啊,使用we ...
- h5新增属性
localStorage,sessionStorage,video,audio的使用方法 <!DOCTYPE html> <html lang="en"> ...
- HTML5中File
一 File对象与FileList对象 当将input元素的type类型设置为file时,web页面上会显示一个选择文本按钮和一个文本显示框,单击文件按钮可以选择一个文件,文本显示框中会显示选中的文件 ...
- 图片Image转换为base64编码的方法
1.FileReader 通过XMLHttpRequest请求图片Blob数据格式,然后利用FileReader转换为dataURL function toDataURL(url, callback) ...
- 一文读懂对抗生成学习(Generative Adversarial Nets)[GAN]
一文读懂对抗生成学习(Generative Adversarial Nets)[GAN] 0x00 推荐论文 https://arxiv.org/pdf/1406.2661.pdf 0x01什么是ga ...
- C# DateTime的11种构造函数 [Abp 源码分析]十五、自动审计记录 .Net 登陆的时候添加验证码 使用Topshelf开发Windows服务、记录日志 日常杂记——C#验证码 c#_生成图片式验证码 C# 利用SharpZipLib生成压缩包 Sql2012如何将远程服务器数据库及表、表结构、表数据导入本地数据库
C# DateTime的11种构造函数 别的也不多说没直接贴代码 using System; using System.Collections.Generic; using System.Glob ...
- FileReader 获取图片base64数据流 并 生成图片
<?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ if(isset($_GET['stream_type ...
- 富文本编辑器&FileReader
最近在做一个web版的管理Tool,其中包括一个编辑框,要求能够编辑文字,插入图片,最后导出做成一个Html.对于资深人士看来,这很容易啊,不就是一个富文本编辑框吗?这其实就是一个概念的问题,对有经验 ...
- JavaScript读取剪贴板中的表格生成图片
原文 JavaScript读取剪贴板中的表格生成图片 演示地址 你可以访问下面的地址体验每个demo https://fairyever.github.io/excel-to-image-demo/ ...
随机推荐
- python字典基本操作
字典是python中五中基本数据类型之一,虽然它的赋值稍微麻烦点,但用起来真的是很方便.它用键值对来存放数据,所谓键值对,就是一个键,对应一个值,如果后面对前面的键再次赋值,第一次的值就被覆盖掉.像是 ...
- springboot+springcloud微服务项目全套资料（笔记+源码+代码）
最近好几天没有写博客了,由于时间的太忙了,项目要做.各种资格证要考试,实在没有时间写了,今天正好赶上有闲暇的一刻,应许多的爱好者的要求发一份微服务项目的资料,此资料十分完整,且是最新的.希望各位读者能 ...
- python 环境搭建 python-3.4.4
第一步:下载和安装python-3.4.4amd.msi 可以去官方网站下载,也可以从网盘下载: 链接:https://pan.baidu.com/s/1dZ9ibgigKPdPUJgykLA_jg ...
- 微信小程序使用npm安装第三方库
微信小程序在 2.2.1 版本后增加了对 npm 包加载的支持,使得小程序支持使用 npm 安装第三方包. 之前在微信开发者工具选择“构建npm”会报错“没找到node_modules”目录”,这是因 ...
- HTTP几种认证方式介绍
HTTP提供了一套标准的身份验证框架:服务器可以用来针对客户端的请求发送质询(challenge),客户端根据质询提供身份验证凭证.质询与应答的工作流程如下:服务器端向客户端返回401(Unautho ...
- wal2json java jdbc 试用
上边有介绍过使用命令行模式的wal2json扩展使用,以下是一个jdbc 集成的试用(pg jdbc 驱动天然支持复制) 环境准备 pg(包含wal2json扩展)docker-compose 文件 ...
- 【51Nod 1769】Clarke and math2
[51Nod 1769]Clarke and math2 题面 51Nod 题解 对于一个数论函数\(f\),\(\sum_{d|n}f(d)=(f\times 1)(n)\). 其实题目就是要求\( ...
- html5手机web页面底部菜单
一.效果图 二.HTML代码 <header class="text-center">TOP</header> <div id="conte ...
- Python 遍历目录下的子目录和文件
import os A: 遍历目录下的子目录和文件 for root,dirs ,files in os.walk(path) root:要访问的路径名 dirs:遍历目录下的子目录 files:遍历 ...
- 问题追查：QA压测工具http长连接总是被服务端close情况
1. 背景 最近QA对线上单模块进行压测(非全链路压测),http客户端 与 thrift服务端的tcp链接总在一段时间被close. 查看服务端日志显示 i/o timeout. 最后的结果是: q ...