基础的 File API
File Apiinput[type = file]
- 用于通过拖拽将本地的某一文件拖到浏览器完成上传。
File 接口，不过还有一点值得注意的是，无论是通过利用控件的形式还是通过拖拽的形式，用户都可以同时选中多个文件，而当用户选择多个文件的时候我们获取到的其实是 FileList 接口，顾名思义，它就是一个 FileFilename
- ： 文件名
type
- :
ASCII
- 编码，
MIMEsize
- : 文件所占的字节 (
bytelastModifiedDate
- : 文件最后修改的日期和时间。
File APIdemo，就像下面的这样。
input[type=file] 控件选择多个文件，不过在这里我们并没有直接使用这个控件，而是利用 button 来触发这个控件的功能。然后通过用户选择的文件会返回一个 FileList 对象，通过对其包含的每个 File
uploadButton . addEventListener ( "click" , function ( ) {
fileInput . click ( ) ;
} , false ) ;
fileInput . addEventListener ( "change" , function ( ) {
if ( fileInput . files ) {
var length = fileInput . files . length ;
for ( var i = 0 ; i < length ; i ++ ) {
fileList . appendChild ( getFileDetailDIV ( fileInput . files [ i ] ) ) ;
}
}
} , false ) ;
这个时候这个小 demo在这之前，我想插入一些拖放的知识。因为网页中并不是每一种元素都可以成为放置目标，所以如果想自定义放置目标，那么我们需要修改 dragover 和 dragenter
var droptarget = document . getElementById ( "custom-target" ) ;
droptarget . addEventListener ( "dragenter" , function ( e ) {
e . preventDefault ( ) ;
} , false ) ;
droptarget . addEventListener ( "dragover" , function ( e ) {
e . preventDefault ( ) ;
} , false ) ;
drop 事件，不过放置事件也是有默认行为的，比如当拖拽的目标是图片的时候，页面就会转向图片，当拖拽的目标是音乐或者视屏的时候，页面就会按照默认的方式打开这些文件，所以如果不想这些事情发生，我们需要阻止 dropdataTransfer,files 就可以获得选中的文件，而且其返回的结果是 FileList
其核心代码如下所示：
dragtarget . addEventListener ( "dragenter" , function ( e ) {
e . preventDefault ( ) ;
} , false ) ;
dragtarget . addEventListener ( "dragover" , function ( e ) {
e . preventDefault ( ) ;
} , false ) ;
dragtarget . addEventListener ( "drop" , function ( e ) {
e . preventDefault ( ) ;
var files = e . dataTransfer . files ,
length = files . length ;
for ( var i = 0 ; i < length ; i ++ ) {
fileList . appendChild ( getFileDetailDIV ( files [ i ] ) ) ;
}
} , false ) ;
File Reader
上面已经介绍了 File API 的使用，不过仅仅是能够获取到文件的属性，实用价值非常有限，所以在 HTML5 File API 中提供了一个新的接口 FileReader，该接口为开发者提供了从客户端 JSreadAsArrayBuffer( Blob )
- : 以
ArrayBufferreadAsBinaryString( Blob )
- : 以二进制字符串的形式返回文件内容。
readAsText( Blob, [, encoding] )
- ： 以
DOMStringreadAsDataURL( Blob )
- : 以数据
URL DOMString
事件如下：
loadstart
- ： 文件读取操作开始时触发。
progress
- : 浏览器读取文件过程中触发。
abort
- ： 执行放弃操作时触发。
error
- : 文件读取过程中出现错误时触发。
load
- ： 文件成功读取后触发。
loadend
既然已经知道了这么多的事件和方法，那么我们就的知道当读取完成后，我们需要的信息存放在何处？
通过上面的介绍，我们已经知道当文件读取成功后，会触发 load 事件，我们想要的事件就在 load 事件中的 event.target.result 中。下面我们针对各个方法做实验，首先创建一个文本 test.txt，其内容如下：
You can import usage data from your Google Analytics account and see exactly how well a feature is supported among your own site’s visitors. Look under the Settings panel to get started!
关于 readAsArrayBuffer() 和 readAsBinaryString() 这两个方法在此就不演示了，因为我个人对ArrayBuffer 的应用场景还不是很清楚，所以下面直接利用 readAsText() 和 readAsDataURL()利用 readAsText()
var fileReader = new FileReader ( ) ;
fileReader . addEventListener ( "load" , function ( e ) {
console . log ( e . target . result ) ;
} , false ) ;
fileReader . readAsDataURL ( file ) ;
其返回的结果如下所示：
可见，它只是将你选择的文本读取出来了，其实通过方法的名字你可能也已经猜出大概了。这有什么用呢？很明显，我们可以利用这个方法编写一个在线阅读或者修改的小应用。
readAsDataURL(), 这个方法的返回值如下：
URL 地址，而通过这个地址我们就可以获取到选中的文件，这个方法非常的有用，比如你想开发图片预览相关的功能或者是在线播放本地音频的应用，都可以利用该方法获取到一个连接到本地资源的 URL，然后进行操作。在以前，要完成同样的功能，必须要将相应的图片或者资源上传到服务器才可以使用。
