<!
DOCTYPE html
>
<
html
lang
=
"en"
>
<
head
>
<
title
>
fileReader
</
title
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
style
>
<
/
style
>
</
head
>
<
body
>
<
p
>
fildReader接口的示例应用
</
p
>
<
label
>
请选择一个文件:
</
label
>
<
input
type
=
"file"
id
=
"file"
/>
<
progress
id
=
"progress"
value
=
"0"
></
progress
>
<
input
type
=
"button"
value
=
"读取图像"
onclick
=
"readAsDataURL()"
/>
<
input
type
=
"button"
value
=
"读取二进制文件"
onclick
=
"readAsBinaString()"
/>
<
input
type
=
"button"
value
=
"读取文本文件"
onclick
=
"readAsText()"
/>
<
div
name
=
"result"
id
=
"result"
></
div
>
<
div
name
=
"result"
id
=
"result1"
></
div
>
<
script
>
var
result
=
document
.
getElementById
(
"result"
);
var
file
=
document
.
getElementById
(
"file"
);
if
(
typeof
FileReader
==
'undefined'
) {
result
.
innerHTML
=
"浏览器不支持fileReader"
;
file
.
setAttribute
(
'disabled'
,
'disabled'
);
}
//改方法将文件读取为一串Data URL字符串
function
readAsDataURL
() {
// 检查是否为图像文件
var
file
=
document
.
getElementById
(
"file"
).
files
[
0
];
var
progress
=
document
.
getElementById
(
"progress"
);
progress
.
max
=
document
.
getElementById
(
"file"
).
files
[
0
].
size
;
// var pro = document.getElementById("progress")[0];
if
(
!
/image\/\w
+
/
.
test
(
file
.
type
)) {
console
.
log
(
"请确保文件为图像类型"
);
return
false
;
}
var
reader
=
new
FileReader
();
reader
.
onload
=
function
(
e
) {
var
result
=
document
.
getElementById
(
"result1"
);
// console.log(this.result);
result
.
innerHTML
=
'<img src="'
+
this
.
result
+
'" alt=""/>'
;
console
.
log
(
"读取成功完成时触发"
);
}
reader
.
onprogress
=
function
(
e
) {
var
pro
=
document
.
getElementById
(
"progress"
);
// console.log("pro" + pro);
// console.log(e.loaded);
// progress.value = e.loaded;
proAdd
(pro,
0
);
console
.
log
(
"数据读取中"
);
}
reader
.
onabort
=
function
(
e
) {
// 数据读取中断是触发
console
.
log
(
"数据读取中断时触发"
);
}
reader
.
onerror
=
function
(
e
) {
console
.
log
(
"出现错误是触发"
);
}
reader
.
onloadstart
=
function
(
e
) {
console
.
log
(
"读取开始时触发"
);
}
reader
.
onloadend
=
function
(
e
) {
console
.
log
(
"读取完成时触发"
);
}
reader
.
readAsDataURL
(file);
};
// 文件读取动态进度
function
proAdd
(
pro
,
value
) {
var
value
=
value
+
1000
;
pro
.
value
=
value;
// console.log(pro.value);
var
sumsize
=
document
.
getElementById
(
"file"
).
files
[
0
].
size
;
console
.
log
(sumsize);
if
(
pro
.
value
<
sumsize) {
setTimeout
(
function
() {
proAdd
(pro, value);
},
20
);
}
else
{
setTimeout
(
function
() {
console
.
log
(
"任务完成"
);
},
20
);
}
};
// 改方法将文件读取为二进制字符串
function
readAsBinaString
() {
var
file
=
document
.
getElementById
(
"file"
).
files
[
0
];
var
reader
=
new
FileReader
();
reader
.
readAsBinaryString
(file);
reader
.
onload
=
function
(
f
) {
var
result
=
document
.
getElementById
(
"result"
);
// 在页面上显示二进制数据
result
.
innerHTML
=
this
.
result
;
}
};
//将文件以文本方式读取
function
readAsText
() {
var
file
=
document
.
getElementById
(
"file"
).
files
[
0
];
var
reader
=
new
FileReader
();
reader
.
readAsText
(file);
reader
.
onload
=
function
(
f
) {
var
result
=
document
.
getElementById
(
"result"
);
result
.
innerHTML
=
this
.
result
;
}
};
<
/
script
>
</
body
>
</
html
>