HTML5 file

html5内新添加了对文件的操作

可以用到的有:

blob 对象，filelist FIleRender

blob对象表示二进制原始数据，它有一些方法可以用来操作<br />
而File对象继承了blob对象<br />
它有两个属性，size  type 表示对象的mime类型，<br />
对于图片文件，type是以image开头<br />

var d="<b>star 我</b>"
			var blob=new Blob([d],{type:'text/html'})
			console.log(blob);
			window.οnlοad=function(){
				var iframe=document.createElement("iframe"); 
				//可以创建url来访问blob
				iframe.src=URL.createObjectURL(blob);    
				document.body.appendChild(iframe);  

			}

filelist包含多个file对象
file对象继承blob对象
FileReader 对象可以读取blob对象

var render=new FileReader();
				render.οnlοad=function(e){
					img.src=e.target.result;
				}
				render.readAsDataURL(fileel.files[0])

FileRender 读取存储在用户计算机上的文件(或者原始数据缓冲)内容
其参数需要是file 或blob 也可以drop拖放里的e.dataTransfer.files//获取文件
或HTMLCanvasElement 

abort:中断
readAsArrayBuffer:
readAsBinaryString：读取二进制字符串
readAsDataURL：读取成url
readAsText：读取为文本数据

onabort:读取操作中止调用
onerror :发生错误
onloadstart:读取开始之前调用
onprogress:读取中调用
onloadend:读取完成调用,不管成功或失败
onload:读取成功调用

//读取图片
			document.querySelector('#but1').addEventListener('click',function(){
				var f=idfile.files[0];
				var r=new FileReader();
				r.οnlοad=function(e){
					result.innerHTML='<img src="'+e.target.result+'" />';					
				}
				r.οnprοgress=function(e){//监听进度
					console.log(e.loaded,e.total);//当前加载大小和总大小
				}
				r.readAsDataURL(f);//参数是file对象，将file转换成url可读取的
			})
			//二进制
			document.querySelector('#but2').addEventListener('click',function(){
				var f=idfile.files[0];
				var r=new FileReader();
				r.οnlοad=function(e){
					result.innerHTML=e.target.result;					
				}
				r.readAsBinaryString(f);
			})
			//文体
			document.querySelector('#but3').addEventListener('click',function(){
				var f=idfile.files[0];
				var r=new FileReader();
				r.οnlοad=function(e){
					result.innerHTML=e.target.result;					
				}
				r.readAsText(f)//读取文本
			})

filesystem现在浏览器支持的不是很好，可以不用考虑

canvas ：

toDataURL(type) 
toBlob()返回一个blob对象，表示包含在该canvas中的图片文件，

mozGetAsFile() 返回一个file对象，包含在该canvas中的图片文件

//toDataURL获取图片base64
			var url=can.toDataURL();
			var img=new Image();
			img.src=url;
			document.body.appendChild(img)
			
			
			//moz 返回file 
			var f=can.mozGetAsFile('a.png');
			var r=new FileReader();
			r.readAsDataURL(f);
			r.οnlοad=function(){
				var img=new Image();
				img.src=r.result;
				img.setAttribute('name','moz')
				document.body.appendChild(img)
			}
			
			
			
			//转换成blob chrome不支持
			//生成的url是blob:http://
			can.toBlob(function(blob){
				console.log(blob);
				//URL把blob转换成url可访问的
				var img=new Image();
				var url=URL.createObjectURL(blob);
				img.src=url;
				document.body.appendChild(img);
				
				//filereader把blob转换成base64
				var r=new FileReader();
				r.οnlοad=function(){
					var img=new Image();
					img.src=r.result;
					document.body.appendChild(img);
				}
				r.readAsDataURL(blob)
			})

我们常用的是toDataURL()，而且支持的比较多。

其他的两种方法就不多了，chrome都不支持。

URL:

URL.createObjectURL(file | blob)

创建一个对参数对象的url访问，url生命周期仅存在于当前页面。

URL.revokeObjectURL(objectURL)

当不需要url时用其释放。