<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
</style>
<script>
function readAsDataURL(){
//检查是否为图像文件
var file = document.getElementById('file').files[0];
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
//将文件以Data URL 形式读入页面
reader.readAsDataURL(file);
reader.onload = function(e){
var result = document.getElementById('result');
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
}
}
function readAsBinaryString(){
var file = document.getElementById('file').files[0];
var reader = new FileReader();
//将文件以二进制 形式读入页面
reader.readAsBinaryString(file);
reader.onload = function(e){
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(e){
var result = document.getElementById('result');
result.innerHTML = this.result;
}
}
</script>
</head>
<body>
<p>
<label>请选择一个文件:</label>
<input type="file" id="file"/>
<input type="button" value="读取图像" οnclick="readAsDataURL()"/>
<input type="button" value="读取二进制数据" οnclick="readAsBinaryString()"/>
<input type="button" value="读取文本文件" οnclick="readAsText()"/>
</p>
<div name="result" id="result">
</div>
</body>
</html>
HTML5中FileReader的使用
最新推荐文章于 2023-02-16 10:07:24 发布