file對象選擇文件
fileReader 對象允許Web應用程序異步讀取用戶計算機上的文件或數據。
html5中，通過添加 multiple屬性，在file控件內允許一次性放置多個文件。
語法：
<input type="file" multiple id="file">
例子：
<input type="file" multiple id="file" onchange="node(this)">
<script>
// onchange 在域的內容改變時發生觸發。
function node(e){
console.log(e.files);
}
</script>
html5 中新增的⽂件操作：
- File：代表⼀個⽂件對象
- FileList：代表⼀個⽂件列表對象，類數組
- FileReader：⽤於從⽂件中讀取數據
- FileWriter：⽤於向⽂件中寫出數據
調⽤ fileReader 對象的⽅法
創建一個FileReader對象
var fReader = new FileReader();
| ⽅法名 | 參數 | 描述 |
|---|---|---|
| abort | none | 中斷讀取 |
| readAsBinaryString | file | 將⽂件轉化爲⼆進制碼 |
| readAsDataURL | file | 將⽂件讀取爲 DataURL |
| readAsText | file,[encoding] | 將⽂件讀取爲⽂本 |
需要注意的是，⽆論讀取成功或是失敗，⽅法並不會返回讀取結果，這⼀結果(儲存在 result 屬性中)要⽤ FileReader 處理事件去獲取；
readAsText：該⽅法有兩個參數，其中第⼆個參數是⽂本的編碼⽅式，默認值爲 UTF-8。這個⽅法⾮常容
易理解，將⽂件以⽂本⽅式讀取，讀取的結果即是這個⽂本⽂件中的內容。
readAsBinaryString：該⽅法將⽂件讀取爲⼆進制字符串，通常我們將它傳送到後端，後端可以通過這段字
符串存儲⽂件。
readAsDataURL：這是例⼦程序中⽤到的⽅法，該⽅法將⽂件讀取爲⼀段以 data: 開頭的字符串，這段字符串的實質就是Data URL，Data URL是⼀種將⼩⽂件直接嵌⼊⽂檔的⽅案。這⾥的⼩⽂件通常是指圖像與 html等格式的⽂件。
屬性
| 屬性 | 描述 |
|---|---|
| error | 在讀取文件時發生的錯誤 |
| readyState | 表明FileReader對象的當前狀態 |
| result | 讀取到的文件內容 |
事件監聽函數
FileReader 包含了⼀整套完成的事件模型，⽤於捕獲讀取⽂件時的狀態,下⾯這個表格歸納了這些事件。
| 事件 | 描述 |
|---|---|
| onabort | 中斷時觸發 |
| onerror | 出錯時觸發 |
| onload | ⽂件讀取成功完成時觸發 |
| onloadend | 讀取完成時觸發，⽆論讀取成功或失敗 |
| onloadstart | 讀取開始時觸發 |
| onprogress | 讀取中 |
實例：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<!-- 文件上傳 input 類型是 file -->
<!-- multiple 屬性，表示可以添加多個文件 -->
<label for="">
單圖片上傳：<input type="file" name="" id="" class="add">
</label>
<label for="">
多文件上傳：<input type="file" multiple name="" id="" class="more">
</label>
<label for="">
單個文件上傳：<input type="file" name="" id="" class="txt">
</label>
<div class="box">
</div>
<script>
var add = document.querySelector(".add");
var box = document.querySelector(".box");
var more = document.querySelector(".more");
var txt = document.querySelector(".txt");
// 單個文件上傳
add.onchange = function () {
// 上傳的文件
var fs = this.files[0];
// 實例化FileReader
var myReader = new FileReader();
// readAsDataURL 把文件轉爲url
myReader.readAsDataURL(fs);
// 文件讀取完成時觸發
myReader.onload = function () {
console.log(myReader.result);
box.innerHTML = "<img src=" + myReader.result + ">";
}
}
// 多個文件
more.onchange = function () {
// 上傳的文件
var fs = [...this.files];
fs.forEach(function (item) {
var myReader = new FileReader();
// readAsDataURL 把文件轉爲url
myReader.readAsDataURL(item);
// 文件讀取完成時觸發
myReader.onload = function () {
console.log(myReader.result);
box.innerHTML += "<img src=" + myReader.result + ">";
}
})
}
// 單個 text
txt.onchange = function () {
// 上傳的文件
var fs = this.files[0];
// 實例化FileReader
var myReader = new FileReader();
// readAsDataURL 把文件轉爲url
myReader.readAsText(fs);
// 文件讀取完成時觸發
myReader.onload = function () {
console.log(myReader.result);
box.innerHTML = "<span>" + myReader.result + "</span>";
}
}
</script>
</body>
</html>