使用FileReader对象的readAsDataURL方法来读取图像文件
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件。使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料;而缺点便是,网页的大小可能会变大。它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件。
参考以下使用readAsDataURL读取图像文件范例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html> <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建立一个<img>标签,再设定src属性为Data URL,再将<img>标签加入DOM之中,例如以下范例所示:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html> <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方法来读取文件,只读取文件的第三个位元组读取到第六个位元组:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html> <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>
|
使用FileReader对象的readAsDataURL方法来读取图像文件的更多相关文章
- FileReader对象的readAsDataURL方法来读取图像文件
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Dat ...
- 转载:使用FileReader对象的readAsDataURL方法来读取图像文件
文章转载自:http://blog.okbase.net/jquery2000/archive/1296.html: FileReader对象的readAsDataURL方法可以将读取到的文件编码成D ...
- ResquestInfoServlet类通过访问HttpServletRequest对象的各种方法来读取HTTP请求中的特定信息,并且把它们写入到HTML中
ResquestInfoServlet类通过访问HttpServletRequest对象的各种方法来读取HTTP请求中的特定信息,并且把它们写入到HTML中 ResquestInfoServlet.j ...
- JS使用readAsDataURL读取图像文件
JS使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片 ...
- JavaScript使用readAsDataURL读取图像文件
JavaScript使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以 ...
- 使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览. 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片 ...
- 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。
一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...
- javascript:FileReader对象(读取文件)
FileReader对象 1.检测浏览器对FileReader的支持 1 if(window.FileReader) { 2 var fr = new FileReader(); 3 // add y ...
- 前端H5中JS用FileReader对象读取blob对象二进制数据,文件传输
HTML5中的Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileReader FileReader主要用于将文件内容读入内存,通过一系 ...
随机推荐
- 创建表空间时ora-01119和ora-27040的处理
创建时出错: SQL> create tablespace gaotbs logging datafile '/u01/app/datafiles/gaodata1.dbf' ...
- tomcat : 虚拟路径映射
tomcat设置虚拟访问地址和真实路径的映射,方法有几种,这里介绍常用的两种方式: 一.修改server.xml文件: 步骤如下: 1.在tomcat根目录下打开conf文件夹,该文件夹下有个ser ...
- 【HNOI2013】比赛
题面 题解 \(n \leq 9 \to\)爆搜 对每一场的结果进行搜索,最后进行\(\mathrm{check}\) 然后会发现没有什么分 搜索最重要的就是剪枝 接下来就列出一些剪枝 搜索时,强制每 ...
- awk高级进阶
第1章 awk数组练习题 1.1 文件内容(仅第一行) [root@znix test]# head -1 secure-20161219 access.log ==> secure-20161 ...
- Jmeter(二十一)_完整Demo
1:创建一个线程组 2:添加一个cookie管理器 3:设置你的信息头管理器:application/json;text/plain;charset=UTF-8 44 4:添加一个用户 ...
- TCP Over HTTP 的Buffer问题
记录下备忘. 场景:要把TCP拆成一个个HTTP请求,通过Proxy 1.HTTP Client上载数据到CCProxy ,然后再到Web服务器的时候. 如果数据量比较小,例如10个字节,Proxy就 ...
- OpenGL学习笔记(4) GLM库的使用
OpenGL和DirextX不一样,没有内置的数学库,于是我们需要找一个第三方库,按照LearnOpenGL的教程我们使用GLM库,可以到他们的官网下载 glm常用的数据类型 vec2 二维向量 ve ...
- centos 开机自启设定:
在sentos系统下,主要有两种方法设置自己安装的程序开机启动.1.把启动程序的命令添加到/etc/rc.d/rc.local文件中,比如下面的是设置开机启动httpd. #!/bin/sh # # ...
- Netty源码分析第7章(编码器和写数据)---->第5节: Future和Promies
Netty源码分析第七章: 编码器和写数据 第五节: Future和Promise Netty中的Future, 其实类似于jdk的Future, 用于异步获取执行结果 Promise则相当于一个被观 ...
- hadoop最新稳定版本使用建议
Apache Hadoop Apache版本衍化比较快,我给大家介绍一下过程 ApacheHadoop版本分为两代,我们将第一代Hadoop称为Hadoop 1.0,第二代Hadoop称为Hadoop ...