## 简介 在HTML5中新增了File API，可以让网页要求用户选择本地文件，并且读取这些文件的信息。选择的方式可以是HTML`<input>`元素，也可以是拖拽。 ## 语法 ~~~ <input type="file" id="photo"> var selectedFile = document.getElementById('photo'); var file = selectedFile.files[0]; //或者 file = selectedFile.files.item(0) ~~~ `selectedFile.files`返回一个FileList对象（有一个属性length，表示文件（File对象）个数），包含了一个或多个File对象，每个File对象都有自己的属性： ~~~ file.name：文件名，该属性只读。 file.size：文件大小，单位为字节，该属性只读。 file.type：文件的MIME类型，如果分辨不出类型，则为空字符串，该属性只读。 file.lastModified：文件的上次修改时间，格式为时间戳。 file.lastModifiedDate ：文件的上次修改时间，格式为Date对象实例。 注意：如果要允许用户选取多个文件，需要加上multiple属性 <input type="file" multiple /> ~~~ 一般情况下，我们会为input注册change事件，当文件被选择时，触发change。 ~~~ selectFile.addEventListener('change',function(){ var fileList = this.files; for(var i = 0; i < fileList.length; i++){ var file = fileList[i]; //或者 fileList.item(0); } },false); ~~~ ## 拖拽 ~~~ <div id="dropbox"></div> dropbox = document.getElementById('dropbox'); dropbox.addEventListener('dragenter',dragenter,false); dropbox.addEventListener('dragover',dragover,false); dropbox.addEventListener('drop',drop,false); ~~~ 在上面的代码中，ID为dropbox的div就是我们拖放目的区域。 拖放事件： ~~~ function dragenter(e){ e.stopPropagation(); e.preventDefault(); } function dragover(e){ e.stopPropagation(); e.preventDefault(); } function drop(e){ e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; } ~~~ 在上面的代码中，参数e是一个事件对象，该参数的dataTransfer.files属性就是一个FileList对象，里面包含了拖放的文件。 注意：使用拖放事件时，必须阻止dragenter和dragover事件的默认行为，才能触发drop事件。 ## FileReader API 在上面我们知道如何获取文件信息，如何使用呢？ 这时我们就要用到FileReader API了，此API用于读取文件，，即把文件内容读入内存。它的参数是File对象或Blob对象。 首先，我们需要实例化FileReader对象： `var reader = new FileReader();` 对于不同类型的文件，FileReader提供了不同的方法来读取文件： ~~~ readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个0到255之间的整数。 readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是’UTF-8’，可以通过可选的格式参数，指定其他编码格式的文本。 readAsDataURL(Blob|File)：返回一个基于Base64编码的data-uri对象。 readAsArrayBuffer(Blob|File)：返回一个ArrayBuffer对象，即固定长度的二进制缓存数据。 我们来看一个显示用户所选图片的缩略图的例子： ~~~ ~~~ <input type="file" onchange="handleFiles(this.files)"/> function handleFiles(files){ for(var i = 0; i < files.length; i++){ var file = files[i]; var imageType = /^image\//; if(!imageType.test(file.type)) continue; var img = document.createElement('img'); img.file = file; document.body.appendChild(img); var reader = new FileReader(); reader.onload = function(e){ img.src=e.target.result; }; reader.readAsDataURL(file); } } ~~~