JavaScript使用readAsDataURL读取图像文件
JavaScript使用readAsDataURL读取图像文件
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小，否则无法读取图像文件。
参考以下使用readAsDataURL读取图像文件范例：
`<!DOCTYPE html>``<``html` `xmlns` `= ``"http://www.w3.org/1999/xhtml"` `>``<``head``>`` ``<``title``> </``title``>`` ``<``script` `type` `= ``"text/javascript"` `>`` ``function ProcessFile( e ) { `` ``var file = document.getElementById('file').files[0];`` ``if (file) {`` ` ` ``var reader = new FileReader();`` ``reader.onload = function ( event ) { `` ``var txt = event.target.result;`` ``document.getElementById("result").innerHTML = txt;`` ``};`` ``}`` ``reader.readAsDataURL( file );`` ``}`` ``function contentLoaded () {`` ``document.getElementById('file').addEventListener( 'change' ,``ProcessFile , false );`` ``}`` ``window.addEventListener( "DOMContentLoaded" , contentLoaded , false );`` ``</``script``>``</``head``>``<``body``>`` ``请选取一个图像文件: <``input` `type` `= ``"file"` `id` `= ``"file"` `name` `= ``"file"` `/>`` ``<``div` `id` `= ``"result"``> </``div``>``</``body``>``</``html``>`
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。
使用Img显示图像文件
若想要将读取出来的图像文件，直接显示在网页上，您可以透过JavaScript建立一个标签，再设定src属性为Data URL，再将
标签加入DOM之中，例如以下范例所示：
`<!DOCTYPE html>``<``html` `xmlns` `= ``"http://www.w3.org/1999/xhtml"` `>``<``head``>``<``title``> </``title``>``<``script` `type` `= ``"text/javascript"` `>``function ProcessFile( e ) { ``var file = document.getElementById('file').files[0];``if ( file ) {`` ` `var reader = new FileReader();``reader.onload = function ( event ) { ``var txt = event.target.result;``var img = document.createElement("img");``img.src = txt;``document.getElementById("result").appendChild( img );``};``}``reader.readAsDataURL( file );``}``function contentLoaded() {``document.getElementById('file').addEventListener( 'change' ,``ProcessFile , false );``}``window.addEventListener( "DOMContentLoaded" , contentLoaded , false );``</``script``>``</``head``>``<``body``>``请选取一个图像文件: <``input` `type` `= ``"file"` `id` `= ``"file"` `name` `= ``"file"` `/>``<``div` `id` `= ``"result"``> </``div``>``</``body``>``</``html``>`
读取部分文件
有时想要读取的文件太大，想要分段进行读取；或者只想要读取文件部分的内容，这时您可以将文件切割，根据浏览器的不同，可以使用以下方法：
webkitSlice：适用于支持Webkit引擎的浏览器，如Chrome。
mozSlice：适用于Firefox。
这两个方法要传入开始的位元组索引，以及结尾的位元组索引，索引以0开始。以下程式范例以FileReader对象的readAsBinaryString方法来读取文件，只读取文件的第三个位元组读取到第六个位元组：
<!DOCTYPE html>
<html xmlns ="http://www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById( 'file' ).files[0];
if ( file ) {
var reader = new FileReader ();
reader.onload = function ( event ) {
var txt = event.target.result;
document.getElementById( "result" ).innerHTML = txt;
};
}
if ( file.webkitSlice ) {
var blob = file.webkitSlice( 2, 4 );
} else if ( file.mozSlice ) {
var blob = file.mozSlice( 2, 4 );
}
reader.readAsBinaryString( blob );
}
function contentLoaded() {
document.getElementById( 'file' ).addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded", contentLoaded , false );
</script>
</head>
<body>
<input type = "file" id = "file" name = "file" />
<div id = "result" > </div>
</body>
</html>
请注意：
不同的浏览器对于HTML 5的支持程度不同，上述程式码可在chrome正常执行，不见得可以在其它浏览器中正确的执行。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
JavaScript使用readAsDataURL读取图像文件的更多相关文章
- JS使用readAsDataURL读取图像文件
JS使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片 ...
- FileReader对象的readAsDataURL方法来读取图像文件
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Dat ...
- 使用FileReader对象的readAsDataURL方法来读取图像文件
使用FileReader对象的readAsDataURL方法来读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项 ...
- 转载：使用FileReader对象的readAsDataURL方法来读取图像文件
文章转载自:http://blog.okbase.net/jquery2000/archive/1296.html: FileReader对象的readAsDataURL方法可以将读取到的文件编码成D ...
- 用javascript设置和读取cookie的例子
请看下面用javascript设置和读取cookie的简单例子,现在的问题是,如果要设置的是一个cookie集,比如在cookie1集中有uname,uid两组信息,应该如何写呢?cookie(&qu ...
- Python 读取图像文件的性能对比
Python 读取图像文件的性能对比 使用 Python 读取一个保存在本地硬盘上的视频文件,视频文件的编码方式是使用的原始的 RGBA 格式写入的,即无压缩的原始视频文件.最开始直接使用 Pytho ...
- Win10系列：JavaScript写入和读取文件
正如上面的内容中所提到的,文件保存选取器用于保存文件,通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文 ...
- Javascript Ajax异步读取RSS文档
RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...
- 在JavaScript文件中读取properties文件的方法
假设有JavaScript文件叫做:readproperties.js,这个文件需要读取config.properties这个配置文件,步骤如下: 1. 下载插件jquery.i18n.proper ...
随机推荐
- Python3 日期与时间戳互相转换（函数可调用）
一.前言 在开发中,我们经常会遇到时间戳转换日期,或者日期转换为时间戳: 日期格式:2019-08-01 00:00:00 时间戳格式:1564588800 关于时间戳 Unix时间戳(Unix ti ...
- Linux之vnc启动及异常处理
1)启动桌面1的服务 [root@testdb ~]# vncserver :1 New 'testdb:1 (root)' desktop is testdb:1 Starting applicat ...
- web 新能优化
网上的东西太多了都是搜来的东西 留着自己看吧! 摘自 :http://www.cnblogs.com/50614090/archive/2011/08/19/2145620.html 打开网站慢现状分 ...
- Python tuple 元组
Python 元组 Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. 如下实例: tup1 ...
- 尚学堂requireJs课程---3、私有和公有属性和方法
尚学堂requireJs课程---3.私有和公有属性和方法 一.总结 一句话总结: 在 [模块] 的基础上,在return对象里面的方法和属性就是公有的(因为外部可以访问),不在的就是私有的 < ...
- 再谈用Excel计算年龄
有的时候,对于客人的信息并不是全知,那么身份证就可能用15位来代替,这个时候怎么计算年龄呢?有一个很简单的公式,可以一次性计算15位或18位身份证的年龄. 首先,需要判断一下,这个身份证是15位还是1 ...
- 文笔很差系列4 - Kris Kremo
转载请标注原链接 https://www.cnblogs.com/xczyd/p/11127671.html Kris Kremo老先生(1951年出生,1970年第一次正式登台,截止2019年练习时 ...
- Redis常见报错之 Redis::CommandError （MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persist on disk）
在Redis运行过程中,报错信息如下: Redis::CommandError (MISCONF Redis is configured to save RDB snapshots, but it i ...
- shell中变量计算
year=44 1.let,不需要$引用变量 let m=year+3 echo $m 2.(()) m=$((year+3)) 3.[ ],注意两边一定要有空格 m=$[ year+3 ] 4. ...
- Oracle COALESCE函数
Oracle COALESCE函数 Oracle COALESCE函数语法为COALESCE(表达式1,表达式2,...,表达式n),n>=2,此表达式的功能为返回第一个不为空的表达式,如果都为 ...