fildReader接口的示例应用

来源：互联网发布：锐捷冒充mac地址上网编辑：程序博客网时间：2024/06/06 21:51
<!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" />
<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];
if (!/image\/\w+/.test(file.type)) {
console.log("请确保文件为图像类型");
returnfalse;
}
var reader= newFileReader();
reader.readAsDataURL(file);
reader.onload= function(e) {
var result= document.getElementById("result1");
console.log(this.result);
result.innerHTML= '<img src="'+ this.result+ '" alt=""/>';
}
};
// 改方法将文件读取为二进制字符串
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