FileReader createObjectURL

<h1>FileReader</h1>
FileReader:<br />
提供了读取文件的方法和结果的事件模型<br />
使用它web可以异步的读取计算机上的文件或原始数据缓冲的内容。
可以使用file 或blod对象来指定所要处理的文件或数据。
其中file对象可以来自于input上返回的filelist对象。
也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果
var a=new FileReader();//创建
方法：<br />
readAsBinaryString(file)  将文件读取为二进制编码,通常将它传递到后台，后台 来储存。

readAsText(file,encoding)  将文件读取为文本,第二参为编码方式，默认是utf-8。
readAsDataURL(file)  将文件读取为dataUrl，以data:开头的。dataurl是一种将小文件直接嵌入文档的方案。

abort() 终端读取操作<br />

处理事件：<br />
onabort  中断时触发<br />
onerror  出错时触发<br />
onload   文件读取成功时触发:函数内this.result<br />
onloadend 读取完成触 发不论成功或失败<br />
onloadstart 读取开始时触 发<br />
onprogress 读取中<br />

<p>  
   <label>请选择一个文件：</label>  <br />
   <input type="file" id="file" />  <br />
   <input type="button" value="读取图像" onclick="readAsDataURL()" />  
   <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />  
   <input type="button" value="读取文本文件" onclick="readAsText()" /> 
   <br>
   <input type="button" value="createObjectURL" onclick="createObjectURL()"> 
</p>  
<div id="result" name="result"></div>  
<script>
var file=document.querySelector('#file');
function readAsDataURL(){
var a=new FileReader();

a.onload=function(e){
console.log(e.target.result);
console.log(this.result);
var img=new Image();
img.src=this.result;
document.body.appendChild(img)
}
//加载进度
a.onprogress=function(e){

console.log(e.loaded);
}
a.readAsDataURL(file.files[0]);
}
function readAsBinaryString(){
var a=new FileReader();

a.onload=function(e){
console.log(e.target.result);
console.log(this.result);

}
//加载进度
a.onprogress=function(e){

console.log(e.loaded);
}
a.readAsBinaryString(file.files[0]);
}
function readAsText(){
var a=new FileReader();

a.onload=function(e){
console.log(e.target.result);
console.log(this.result);

}
//加载进度
a.onprogress=function(e){

console.log(e.loaded);
}
a.readAsBinaryString(file.files[0]);
}
</script>

<h1>createObjectURL</h1>
<p>
方法会根据传入的参数创建一个指向该对象的url.
参数可是blob file

</p>
<p>
URL.revokeObjectURL(obj) 
释放一个object对象，
</p>
<script>
function createObjectURL(){
window.o=URL.createObjectURL(file.files[0]);
var img=new Image();
img.src=o;
img.onload=function(){
URL.revokeObjectURL(o);
}
document.body.appendChild(img);
}
</script>
<h1>blob</h1>
<p>
file对象只是blob对象的一个更具体的版本.
blob存储着大量的二进制数据，并且blob的size和type属性，
被file对象继承。
所以， 在大多数情况下，blob 对象和 file 对象可以用在同一个地方，例如，可以使用 FileReader 借口从 blob 读取数据，也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。<br/>
创建方法需要二个参数，一个是内容，另一个是对象，用来设置编码等

</p>
<script>
var blob = new Blob(["Hello World!"],{type:"text/plain"}); 

</script>