fildReader接口的示例应用（二）

来源：互联网发布：陕西网络作家协会编辑：程序博客网时间：2024/06/07 01:10
<!DOCTYPE html>
<htmllang="en">

<head>
<title>fileReader</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1">
<style></style>
</head>

<body>
<p>fildReader接口的示例应用</p>
<label>请选择一个文件:</label>
<inputtype="file"id="file" />
<progressid="progress"value="0"></progress>
<inputtype="button"value="读取图像"onclick="readAsDataURL()" />
<inputtype="button"value="读取二进制文件"onclick="readAsBinaString()" />
<inputtype="button"value="读取文本文件"onclick="readAsText()" />
<divname="result"id="result"></div>
<divname="result"id="result1"></div>
<script>
var result= document.getElementById("result");
var file= document.getElementById("file");
if (typeofFileReader == 'undefined') {
result.innerHTML= "浏览器不支持fileReader";
file.setAttribute('disabled','disabled');
}
//改方法将文件读取为一串Data URL字符串
functionreadAsDataURL() {
// 检查是否为图像文件
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("请确保文件为图像类型");
returnfalse;
}
var reader= newFileReader();

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);
};

// 文件读取动态进度
functionproAdd(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);
}

};
// 改方法将文件读取为二进制字符串
functionreadAsBinaString() {
var file= document.getElementById("file").files[0];
var reader= newFileReader();
reader.readAsBinaryString(file);
reader.onload= function(f) {
var result= document.getElementById("result");
// 在页面上显示二进制数据
result.innerHTML= this.result;
}
};
//将文件以文本方式读取 
functionreadAsText() {
var file= document.getElementById("file").files[0];
var reader= newFileReader();
reader.readAsText(file);
reader.onload= function(f) {
var result= document.getElementById("result");
result.innerHTML= this.result;
}
};
</script>
</body>

</html>
阅读全文
0 0