在html4的年代，我们如果要在网页上呈现一张用户本地的图片，需要用户先把图片上传到服务器，再根据服务器提供的图片地址把图片下载下来，才能把图片在网页上呈现出来。这一来二往，起码已经费了两倍于这张图片的流量了，更别说服务器为了存储这张图片所花费的资源以及用户上传错了图片的冤枉成本（因为在html4时代，用户选择好图片后，往往只能看到图片的文件名，而无法通过预览图来进一步确认这张图片是否就是自己想要上传的）。
html5提供了新玩法，光靠浏览器，就可以对本地的（其实也可以是远程的）文件（主要是图片）进行呈现、读取、处理等操作，而这一切，则是通过html5 file api来实现的。
首先是数据结构，html5定义了一个file对象类型来表示文件，每个file对象对应一个文件。file对象有3个属性：name、size、type。name是不包含路径的文件名，size是以字节为单位的文件体积大小，type则是文件的MIME（例如image/jpg）。
file对象不单独存在，而是以数组形式，存在一个名为FileList的数组中。那么，如何拿到这个FileList数组呢？目前，html5有两个途径可以拿到FileList，一是通过file类型的input，二是通过拖放操作的drop事件。
通过file类型的input获取FileList
| <input id="file-input" type="file" /> |
或html5新增的可进行文件多选的multiple属性：
| <input id="file-input" type="file" multiple /> |
一般，我们都是给input:file绑上一个onchange事件，以便在用户选定文件后，马上进行读取文件等下一步操作：
| //原生js var inputElement = document.getElementById("file-input"); inputElement.addEventListener("change", handleFiles, false); function handleFiles() { var fileList = this.files; } //jquery版 $('#file-input').on('change', function() { var fileList = this.files; }); |
通过拖放操作drop事件
首先要设定一个可供拖放的区域：
| <div id="dropbox" style="width: 200px;height: 200px;"></div> |
另外，为了能触发drop事件，我们必须阻止dragenter和dragover事件的默认行为：
| var dropbox; dropbox = document.getElementById("dropbox"); dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } |
然后，我们就可以在drop事件的callback中，获取到fileList：
