Html5 文件API（一）

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

把文件读取为文本数据

新建一个文本文件

readAsText.txt

,文本内容随意填写

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

加载结束后