标签：
在《[File杂谈——初识file控件](http://www.seejs.com/archives/668 "File杂谈——初识file控件")》一文中，我们已经对file控件有了初步的了解，并且对制作一个视觉和体验一致的file控件做了较为详细的说明，今天我们继续了解file控件的更多特性，并延伸出更多。 ## 新增属性 在HTML5到来之前，绝大多数情况下使用file控件，我们前端工程师需要的有用信息都只能通过value属性获得的文件名字符串来获取（比如：文件类型、文件的直接名称等），这个很不方便，多文件上传的时候就更加麻烦了。另外，我们想不通过其他手段获取上传文件的大小更是一种奢望。 不过，好在这一切并没有那么糟，随着HTML5的到来，file控件上新增了files属性。该属性包括了file控件选择的文件对象集合，每个文件对象包含了当前文件的基本信息（类型、名称、大小）等，这样一来我们再也不用使用正则啊，字符串拆分啊，等等麻烦的方法去获取我们想要的信息了。下面我们在Chrome的控制台看下files属性的结构。我的测试方法是这样的： 首先，使用Chrome浏览器随便打开一个网页，然后F12调出开发工具，接着在Console中输入： ``` document.body.innerHTML = ‘<input type="file" id="J_File">‘; var f = document.getElementById(‘J_File‘); f.onchange = function() { console.log(this.files); }; ``` 这时页面会被替换成一个file控件，点击选择一个或多个（多个需要在input标签上增加multiple属性）本地文件，这时change事件将会被触发，控制台将会输出一下数据：  显而易见，files属性的值是一个FileList类型的对象，它和数组类似，同样拥有length属性，而且我们也可以直接使用循环去获取每一个文件（File）对象（例：取第一个文件就是files[0]）。我们继续看每个文件对象中包含的信息，我们常用的name、size、type等应有尽有了，突然感觉好高大上。 然而，我要告诉大家的是，我们也不能肆无忌惮的使用file控件的files属性，因为它在IE9及以下版本的IE浏览器中是不存在的，我们需要使用其他的手段（flash等）来弥补这个问题，这里就不展开了。 ## file控件的地位受到威胁 随着files属性的出现，file控件的地位显然得到了很好的提升，但是这并不表示它的地位更加稳固。随着HTML5二来的，并不只有file控件的files属性。我们已经可以在越来越多的网站上可以看到拖拽上传这个一个新颖并且更符合用户行为的交互效果。这里我先不说拖拽上传功能的实现，我们先一起来看看另一种获取FileList对象的方法。 首先，我们需要一个拖拽上传的静态界面，细节不多说，直接上代码： ``` <style> * {margin: 0;padding: 0;} .up-area {margin: 50px auto;border: 1px dashed #ccc;background-color: #eee;width: 600px;height: 400px;line-height: 400px;text-align: center;color: #666;cursor: pointer;} .up-area:hover {background-color: #ddd;} </style> <input type="file" name="" id="J_UploadFile" style="display: none;"> <div class="up-area" id="J_UploadArea"> 点击此处或拖入文件进行上传 </div> <script> (function(){ var area = document.getElementById("J_UploadArea"), file = document.getElementById("J_UploadFile"); function uploadFile(fs) { console.log(fs); } area.onclick = function() { console.log(‘click‘); file.click(); }; file.onchange = function() { uploadFile(this.files); }; area.ondragenter = function(ev) { this.className = ‘up-area hover‘; ev.preventDefault(); }; area.ondragover = function(ev) { ev.preventDefault(); }; area.ondrop = function(ev) { ev.preventDefault(); console.log(‘drop‘); var dt = ev.dataTransfer; this.className = ‘up-area‘; uploadFile(dt.files); }; })(); </script> ``` 在线[Demo](http://www.seejs.com/demos/preview/dragin/)。将文件拖入灰色区域释放便可以在页面上看到文件信息。 细心的朋友可能已经发现了，其实我们这里又提供了优化file控件的另外一种方式——完全使用另一个标签替代，在该标签的click事件中主动触发file控件的click事件，正如上面代码中的：`file.click()`。但是，这不是本文的重点。 我们仔细看上面代码中的最后一段，即ondrop的事件处理函数，我们的files对象并不是来自file控件，而是一个叫dataTransfer的东西。那么我们是不是可以大胆的猜测，拖拽上传功能其实可以完全抛开file控件独立完成？这里先留个悬念，我们以后再讨论。 在上面的案例中我们通过点击来选择文件从而获取FileList对象，和通过将文件拖拽到灰色区域来获取FileList对象，这两种方式虽不同，但我们得到的数据确是一样的，这足以说明file控件不再独裁，它的地位已经渐渐开始受到威胁。 作者博客：[百码山庄](http://www.seejs.com)标签：
原文地址：http://my.oschina.net/mailzwj/blog/468978
