<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Reader 文件上传</title>
</head>
<body>
<input type="file" class="file-input">
<img src="" class="img" style="400px;height:400px;">
<script>
// 获取文件
let fileInput = document.querySelector('.file-input');
// 获取图片
let imgSrc = document.querySelector('.img')
imgSrc.style.display = 'none'
// 创建 FileReader 对象
let fileReader = new FileReader();
// 文件onchange获取
fileInput.onchange = function(e) {
// 获取原生 File 对象
let file = event.target.files[0]
// fileReader.readAsArrayBuffer(file) // 以二进制读取文件对象
// fileReader.readAsText(file) //以字符串形式表示读取到的文件内容
fileReader.readAsDataURL(file) // 以data:URL 格式的字符串以表示读取文件的内容
}
// 读取操作完成后获取
fileReader.onload = function(e) {
console.log(e.target.result)
imgSrc.src = e.target.result
imgSrc.style.display = ''
}
</script>
</body>
</html>
步骤
- 创建
FileReader 对象
- 通过
fileInput 的 dom 对象 onchange 对象, 获取原始的 File 对象
- 通过
FileReader 中 [readAsDataURL] [readAsArrayBuffer] [readAsText]一种读取原始 File对象
- 通过
FileReader 的 onload 方法获取来继续完成后的操作