Html5 文件API（一）

[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属性规定可同时选择多个选项。可参考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

把文件读取为文本数据

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

加载结束后