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 ...
随机推荐
- Tishreen-CPC 2018 G. Colors Overflow(分块)
Problem G. Colors Overflow Input file: standard input Output file: standard output Balloon Color: Da ...
- 库&插件&框架&工具
nodejs 入门 nodejs 入门教程,大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享 浅谈前端线上部署与运维 说到前端部 ...
- oc 基本语法 类 静态变量 常量
// // ReViewClass.h // hellowWorld // 本类是oc复习练手类 // Created by hongtao on 2018/3/26. // Copyright © ...
- cookie、session的联系和区别，多台web服务器如何共享session
1.Cookie与Session的联系: cookie在客户端保存状态,session在服务器端保存状态.但是由于在服务器端保存状态的时候,在客户端也需要一个标识,所以session也可能要借助coo ...
- AutoItLibrary测试Windows GUI
AutoItLibrary库关键字 AutoItLibrary 的对象操作大体上有几大主要部分,Window 操作.Control 操作.Mouse 操作.Process操作.Run 操作.Reg 操 ...
- ubuntu最近升级到最新的linux内核后，网络无法使用怎么办？
答:进入旧的内核中编译需要的网卡模块 1. 启动旧的内核进入系统 2. 安装新内核源码 3. 找出当前的网卡型号 4. 尝试卸载某个与网卡相关的内核模块,观察是否影响当前网卡的使用,如果有影响,那么便 ...
- leetcode73矩阵置零
https://leetcode-cn.com/problems/set-matrix-zeroes/ 解答: 两种方法时间复杂度都为O(mn) O(m+n)空间方法: 用两个容器储存为0的行和列 c ...
- [转]spring的filter中targetFilterLifecycle作用
在web.xml中进行配置,对所有的URL请求进行过滤,就像"击鼓传花"一样,链式处理. 配置分为两种A和B. A:普通配置 在web.xml中增加如下内容:<filter& ...
- js 无限级分类
const arr = [ { id: 1, parentId: 0, name: '四川' }, { id: 2, parentId: 0, name: '贵州' }, { id: 3, paren ...
- 如何使用Pythonapi函数写股票策略
如何使用Python api 函数写股票策略 写策略需要了解的语法包括两方面,一方面是语言本身的语法(包括相关库),另一方面是量化平台提供的api.量化平台提供的api帮助文件里都有了,本文主要介绍写 ...