[TOC]

## FileList ****對象與****File ****對象

直接看示例

html代碼

<input type="file" id="file" multiple>
<input type="button" id="btn" value="文件上傳">

js代碼

window.onload = function(){
 function showFile(){
  var file = document.getElementById('file');
  for (var i = 0; i < file.files.length; i++) {
   console.log(file.files[i]);
  }
 }

 var btn = document.getElementById('btn');
 btn.onclick = function(){
  showFile();
 };
};

示例中涉及屬性multiple屬性規(guī)定可同時選擇多個選項?？蓞⒖?a target="_blank" rel="nofollow">multiple解釋

## Blob ****對象

根據上個實例,因為file繼承自blob，所以file可以得到文件的名字，尺寸，類型

files[i].name  //獲得第i個文件的名字
files[i].size  //獲得第i個文件的大小
files[i].type  //獲得第i個文件的類型

為上個實例添加判斷上傳文件是否為圖片

js代碼

window.onload = function(){
 function showFile(){
  var file = document.getElementById('file');
  for (var i = 0; i < file.files.length; i++) {
   if (!/image\/\w+/.test(file.files[i].type)) {
    alert('請上傳圖片喔！');
   }else{
    console.log('成功上傳。');
   }
  }
 }

 var btn = document.getElementById('btn');
 btn.onclick = function(){
  showFile();
 };
};

## FileReader ****對象

直接看示例

html

<input type="file" id="file">
<input type="button" id="btn" value="讀取文件">
<div id="result"></div>

五個對象

readAsBinaryString

把文件讀取為二進制字符串

window.onload = function(){
 function readAsBinaryString(){
  var file = document.getElementById('file').files[0];

  var reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = function(e){
   var result = document.getElementById('result');

   result.innerHTML = this.result;
  };

 }

 var btn = document.getElementById('btn');
 btn.onclick = function(){
  readAsBinaryString();
 };
};

readAsText

把文件讀取為文本數(shù)據

1. 新建一個文本文件readAsText.txt,文本內容隨意填寫
2. js代碼為

window.onload = function(){
function readAsText(){
 var file = document.getElementById('file').files[0];

 var reader = new FileReader();
 reader.readAsText(file);
 reader.onload = function(e){
  var result = document.getElementById('result');

  result.innerHTML = this.result;
 };

}

var btn = document.getElementById('btn');
btn.onclick = function(){
 readAsText();
};
};

readAsDataURL

將讀取到的文件編碼成Data URL。

window.onload = function(){
 function readAsDataURL(){
  var file = document.getElementById('file').files[0];

  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e){
   var result = document.getElementById('result');

   result.innerHTML = '<img src="'+ this.result +'" alt="" />';
  };

 }

 var btn = document.getElementById('btn');
 btn.onclick = function(){
  readAsDataURL();
 };
};

readArryButter

abort

中斷讀取操作

六個事件

onabort

加載被中斷時

onerror

加載出錯時

onloadstart

加載開始時

onprogress

加載過程中

onload

加載成功時

onloadend

加載結束后