NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

FileReader的介面方法

  • FileReader的介面方法有四個,其中三個用來讀取檔案,另一個用來終端讀取。無論讀取成功或者失敗。方法並不會返回讀取結果。這一結果儲存在result屬性中。
  • readAsBinaryString(file): 將檔案讀取成二進位制檔案
  • readAsText(file[,enconing]): 將檔案讀取為文字
  • readAsDataURL(file): 將檔案讀取為DataURL。
  • abort(none): 中斷讀取操作

FileReader介面事件

  • FileReader介面包含了一套完整的事件模型,用於捕獲讀取檔案時的狀態。
  • onabort: 中斷載入
  • onerror:出錯是觸發
  • onloadstart: 開始讀取時觸發
  • onprogress: 正在讀取
  • onload: 讀取成功
  • onloadend: 讀取完成,無論成功或者失敗都會被呼叫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<input type="file" name="test" id="" class="input">
<img src="" alt="" height="200" width="300" class="img">
<button class="show-img">預覽圖片</button>
<button class="show-bit-btn">讀取二進位制</button>
<div class="show-bit"></div>
<script>
var fileInput = document.querySelector('.input');
var img = document.querySelector('.img');
var showBtn = document.querySelector('.show-img');
var showBitBtn = document.querySelector('.show-bit-btn');
var showBitDiv = document.querySelector('.show-bit');
//判斷瀏覽器是否支援FileRader介面
if (typeof FileReader == 'undefined') {
alert('哈哈,土鱉,你的瀏覽器不支援FileReader')
fileInput.setAttribute('disabled', 'disabled')
}
var file;
//預覽圖片
fileInput.addEventListener('change', function () {
file = this.files[0];
}, false)
console.log('helo')
showBtn.addEventListener('click', function () {
if (typeof file == 'undefined') {
alert('請先選擇圖片')
return
}
var reader = new FileReader();
reader.addEventListener('load', function () {
console.log('reader', reader)
img.src = reader.result;
}, false)
reader.readAsDataURL(file)
})
//讀取二進位制檔案 讀取text檔案和二進位制檔案愛你相同,只需要提換方法即可
showBitBtn.addEventListener('click', function () {
if (typeof file == 'undefined') {
alert('請先選擇圖片')
return
}
var reader = new FileReader();
// reader.readAsBinaryString
reader.readAsBinaryString(file)
reader.addEventListener('loadstart',function (){
console.log('開始讀取', this)
})
reader.addEventListener('progress',function (){
console.log('讀取中', this)
})
reader.addEventListener('load', function () {
// 讀取到的二進位制檔案展示出來
showBitDiv.innerHTML = reader.result
})
reader.addEventListener('loadend',function (){
console.log('讀取結束', this)
})
})
</script>
</body>
</html>

相關文章

程式語言 最新文章