<!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="width: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 方法獲取來繼續完成后的操作
