Html5 文件API（一）

Html5 文件API（一）

目录

• Html5 文件API（一）
  • FileList 对象与File 对象
  • Blob 对象
  • FileReader 对象
    • 五个对象
      • readAsBinaryString
      • readAsText
      • readAsDataURL
      • readArryButter
      • abort
    • 六个事件
      • onabort
      • onerror
      • onloadstart
      • onprogress
      • onload
      • onloadend

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

加载结束后