HTML5权威指南--标签新变化,文件API,拖放API

1.文件API

HTML5中提供了一个关于文件操作的文件API。

<1>FileList对象和file对象

如：

 

<2>Blob对象

Blob表示二进制原始数据，上面的file对象也继承了这个Blob对象。

Blob对象有两个属性，size属性表示一个Blob对象的字节长度。

type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。

如：

function shw(){
 var file;
 var a=document.getElementById('file').files;
 console.log(a[0].name);
}
 

 

<3>FileReader接口

该接口主要用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API。

使用该API可以再浏览器主线程中异步访问文件系统，读取文件中的数据。

a:该接口的下面三个方法：

 

b:该接口的事件：

html:

<input type="file" id="file"/>
<input type="button"  value="读取图像" onclick="re()"/>
<input type="button"  value="读取二进制数据" onclick="er()"/>
<input type="button"  value="读取文件文件" onclick="dq()"/>
 
<div name="result" id="result">
</div>

 

 

js:

function re(){
 
 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=""/>';
  //alert(file.name);
 }
}
 
function er(){
 
 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;
  //alert(file.name);
 }
}
    
function dq(){
 var file=document.getElementById("file").files[0];
 var reader=new FileReader();
 //将文件以Data URL形式读入页面
 reader.readAsText(file);
 reader.onload=function(e){
 
  var result=document.getElementById("result");
  result.innerHTML=this.result;
  //alert(file.name);
 }
}

 

12.拖放API

<1>拖放事件：

如：

html:

<div id="dragme" draggable="true" style="width;200px;border:1px solid red">被拖放DIV</div>
<div id="text" draggable="true" style="width;200px;border:1px solid red">放入的DIV</div>

 

 

js：

function init(){
 var source=document.getElementById("dragme");
 var dest=document.getElementById("text");
 source.addEventListener("dragstart",function(ev){
  var dt=ev.dataTransfer;
  dt.effectAllowed='all';
 
  dt.setData("text/plain","你好");
 },false);
 
 dest.addEventListener("dragend",function(ev){
  ev.preventDefault();
 },false);
 
 dest.addEventListener("drop",function(ev){
  var dt=ev.dataTransfer;
  var text=dt.getData("text/plain");
  dest.textContent+=text;
  ev.preventDefault();
  ev.stopPropagation();
 },false);
 
}
 
document.ondragover=function(e){e.preventDefault();}
document.ondrop=function(e){e.preventDefault();}

 

具体分析：

 

<2>DataTransfer对象的属性与方法

<3>设定拖放时的视觉效果