html5文件API知识点总结

HTML页面代码：

<input type='file' id='file' multiple />
<input type='button' value='文件上传' id='btn'/>
文件的字节长度：<span id='size'></span>
文件的类型：<span id='type'></span>
<input type='button' id='btn1' value='读取图像'/>
<input type='button' id='btn2' value='读取二级进制数据'/>
<input type='button' id='btn3' value='读取文本文件'/>
<div id='result'></div>

js页面代码：

window.onload = function(){
 /* //1.file对象.files返回的是FileList对象，其下有两个属性：name文件名，lastModifiedDate
	var oFile = document.getElementById('file');
	var oBtn = document.getElementById('btn');
	
	oBtn.onclick =  function showName(){
		var aFile = oFile.files;//返回FileList文件列表对象
		for(var i = 0;i < aFile.length;i++){
			console.log(aFile[i].name +":"+aFile[i].lastModifiedDate);
		}
	};
	*/
	
	/*//2.Blob对象，其下两个属性：size-字节长度 type-类型文件
	var oFile = document.getElementById('file');
	var oBtn = document.getElementById('btn');
	var oSize = document.getElementById('size');
	var oType = document.getElementById('type');
	
	var aFile = oFile.files;
	oBtn.onclick = function(){
		for(var i = 0;i < aFile.length;i++){
			 oSize.innerHTML += aFile[i].size + ";";
			 oType.innerHTML +=aFile[i].type + ";";
		}
	};*/
/*	//3.Blob属性type的应用--只能上传图像文件，type-->image/*
	var oFile = document.getElementById('file');
	var oBtn = document.getElementById('btn');
	var aFile = oFile.files;
	oBtn.onclick= function(){
		for(var i = 0;i < aFile.length;i++){
			if(!/image\/\w+/.test(aFile[i].type)){
				alert(aFile[i].name + '不是图像文件');
				break;
			}else{
				alert(aFile[i].name + ';上传成功！');
			}
		}	
	};*/
	
	//4.上面的例子中限制上传条件，现在HTMl5已经对file控件添加了accept属性，这个属性就是告诉file只能接受什么类型的文件，
	/*//5.FileReader接口，把文件读入内存中，并且读取文件中的数据，现在只有少数浏览器支持该API,下面的方法可以检测浏览器是否对FileReader接口支持。
	 function isFileReader(){
		if(typeof FileReader == 'undefined'){
			alert('您的浏览器未实现FileReader接口');
		}else{
			alert('您的浏览器能实现FileReader接口');
		}
	};
	isFileReader();//经检测我的浏览器可以实现FileReader接口*/
	
	//6.(1)FileReader接口的方法 (2)FileReader接口的事件 
	/*(1)FileReader接口的方法

	FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
	
    方法名 	             参数 	               描述
	readAsBinaryString 	 file 	               将文件读取为二进制编码
	readAsText 	         file,[encoding] 	   将文件读取为文本
	readAsDataURL 	     file 	               将文件读取为DataURL
	abort 	             (none) 	           终端读取操作

	(2)FileReader接口事件
	
	FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
	
	事件 	     描述
	onabort 	 中断
	onerror 	 出错
	onloadstart  开始
	onprogress 	 正在读取(我们需要编写的代码主要在onprogress当中。)
	onload     	 成功读取
	onloadend 	 读取完成，无论成功失败*/
	
	//7.fileReader的使用实例
	var oFile = document.getElementById('file');
	var aInput = document.getElementsByTagName('input');
	var oDiv = document.getElementById('result');
	var sFile = oFile.files[0];
	//读取图像文件
	aInput[2].onclick = function(){
		if(!/image\/\w+/.test(sFile.type)){
			alert('对不起上传的不是图像文件');
			return false;
		}
		var reader = new FileReader();
		reader.readAsDataURL(sFile);
		reader.onload = function(){
			oDiv.innerHTML = '<img src="'+ this.result+'"/>';
		};
		
	};
	//读取二进制文件
	aInput[3].onclick = function(){
		var reader = new FileReader();
		reader.readAsBinaryString(sFile);
		reader.onload = function(){
			oDiv.innerHTML =this.result;
		};
	};
	//读取文本文件
	aInput[4].onclick = function(){
		var reader = new FileReader();
		reader.readAsText(sFile);
		reader.onload = function(){
			oDiv.innerHTML =this.result;
		};
	};
};
</script>

 

转载于:https://my.oschina.net/dreamchenming/blog/675369