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 () {
).addEventListener(
'change'
,
ProcessFile,
false
);
}
window.addEventListener(
"DOMContentLoaded"
);
</script>
</head>
<body>
<div id =
> </div>
</body>
</html>
|
readAsDataURL方法会使用base-64进行编码，编码的资料由data字串开始，后面跟随的是MIME type，然后再加上base64字串，逗号之后就是编码过的图像文件的内容。
若想要将读取出来的图像文件，直接显示在网页上，您可以透过JavaScript建立一个<img>标签，再设定src属性为Data URL，再将<img>标签加入DOM之中，例如以下范例所示：
<head>
<title> </title>
>
function ProcessFile( e ) {
];
( file ) {
FileReader();
reader.onload = function ( event ) {
var txt = event.target.result;
var img = document.createElement(
"img"
);
img.src = txt;
).appendChild( img );
};
}
reader.readAsDataURL( file );
}
function contentLoaded() {
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
);
}
);
</script>
</head>
<body>
/>
> </div>
</body>
读取部分文件
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。 相关推荐 |
