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

<3>FileReader接口

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

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

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

b:该接口的事件：

html:

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放入的DIV

js：