<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FileReader</title>
</head>
<body>
<p>
<label>请选择一个文件:</label>
<input type="file" id="file"/>
<input type="button" value="读取图像" onclick="readAsDataURL()"/>
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()"/>
<input type="button" value="读取文本文件" onclick="readAsText()"/>
</p>
<div name="result" id="result">
</div>
<script>
let result = document.getElementById("result")
let file = document.getElementById("file")
if(typeof FileReader == 'undefined'){
result.innerHTML = "<p>抱歉,你的浏览器不支持FileReader</p>"
file.setAttribute('disabled','disabled')
}
function readAsDataURL(){
let file = document.getElementById("file").files[0]
if(!/image\/\w+/.test(file.type)){
alert("请确保文件为图像类型")
return false;
}
let reader = new FileReader();
reader.readAsDataURL(file)
reader.onload = function(e){
let result = document.getElementById("result")
result.innerHTML = '<img src="'+this.result+'" alt=""/>'
console.log(this)
console.log(this.result)
}
}
function readAsBinaryString(){
let file = document.getElementById("file").files[0]
let reader = new FileReader()
reader.readAsBinaryString(file)
reader.onload = function(f){
let result = document.getElementById("result")
result.innerHTML = this.result
console.log(result.innerHTML)
}
}
function readAsText(){
let file = document.getElementById("file").files[0]
let reader = new FileReader()
reader.readAsText(file)
reader.onload = function(f){
let result = document.getElementById("result")
result.innerHTML = this.result
console.log(result.innerHTML)
}
}
</script>
</body>
</html>
