你不得不知关于HTML5中File API的秘密

Question

文件上传一直是网页开发中一大难题，既要考虑到安全性，又要考虑功能实现以及外观设觉效果，作为一个开发者确实比较头疼，而这个功能可以是网页表单的标配，我们不得不深入的去研究下其具体的实现方法。

我们使用最多的就是最基本的表单上次，而且这个兼容性很好，唯一不足就是外观我们无法改变，不过随着技术的革新，我们总能找到很多方法去完成我们想要的效果和功能。

清空文件域的值

我们上传文件总是有一定的特殊性，比如我们只允许上传图片，但是用户可不这么想，特别是有些别有用心的用户总是想搞事情，对一个文件域进行验证后，我们总是想剔除不符合规范的文件，否则错误的文件仍然会被提交，在IE中由于安全设置的原因，是不允许更改文件域的值。

那么很显然，我们就只能换个思路，把这个Input元素复制一个，然后将原来的删除：

• 在IE下复制元素的时候，其中的值是不会被复制的，所以就达到了清空文件域的目的了。
• 而在Firefox等其他浏览器下，其中的值也会被一同复制，那么我们就顺便清空一下就做到兼容了。

var file = $("#file")
file.after(file.clone().val(""));
file.remove();

设置文件域的值

可能很多人都想知道，我们能不能手动设置文本域的值，答案是不可以的，如果可以设置，网站就会很容易攻击客户端，我可以在表单提交的时候，上次用户电脑里面任意的文件，想想都有点可怕。设置文本域的值是不可能成功的，做这个控件的人早已想到这一点。所以就不要去妄想更改Input File文件域的值了。

读取文本域的值

读取文本域的值肯定是可以的，而且这个值还是只读的，不能被清空、不能被更改，只能由用户去更改，因为这是在被人的电脑里面操作，我们只能做好上传的表单，被动的接收文件即可。

例如常见的表单上传代码如下：

<form enctype="multipart/form-data" method="post" action="https://www.wenjiangs.com">
    <input id="myfile" type="file" name="myfile">
    <input id="submit" type="submit" name="submit">
</form>

注意：上传文件的表单必须设置enctype为multipart/form-data类型。

通过HTML5中最新的File API，我们可以轻松的获取用户选择的文件信息。

file = document.getElementById('myfile').files[0];
file.name;  //文件名称，可能包含了中文
file.size;  //文件的大小，单位是字节B
file.type;  //文件类型

当然还有其他的一些API可以使用，比如讲图片转换为base64格式，我们就可以实现文件预览，比如直接读取文件的二进制代码，以文本的方式显示图片的内容等，这些太高级了，而且我们的浏览器兼容性也是问题，这里就不过多的介绍了。

文件的多选/单选

批量上传一直是一个很火热的功能，传统的表单上传一次只能上传一个文件，但是现在我们可以简单的设置一个参数，即可实现多个文件批量上传，HTML5中允许选择多个文件：

<input type="file" multiple>

单选就不用解释了，没有multiple参数默认就是单个文件上传。

指定上传格式

我们用户打开上传窗口的时候，如果不加限制就会显示所有的文件，这让用户不能准确快速的查找到想要上传的文件，好在开发者已经意识到了这个需求，添加一个属性就好了：

accept="image/gif,image/png"

更改文本域外观

默认的<input type="file" />实在是太丑了，不过我们还可以自定义显示的外观，我能想到两个方法来自定义，也许你能想到更多的方式去处理这个小问题。

透明隐藏文本域

我们可以按照我们的需求，编写好我们的表单表现形式，文本域的地方我们做一个非常漂亮的按钮，这个时候他仅仅是一个按钮，点击不会出现任何效果，我们可以把文本域覆盖到这个按钮上面，然后设置文本的透明度为0，这样我们点击按钮的时候，其实是点击的文本域，这里会使用到position定位和 opacity 透明度，有兼容问题，IE和其他浏览器需要分开处理。

.myfile{
    position:static;
    top:-36px;
    alpha(opacity=0);
    -moz-opacity:0;
    opacity:0;
}

隐藏文本域JavaScript触发时间

上面的方法可能过于复杂，那么我们还可以使用JavaScript来主动触发文本域的点击事件，对用户来说基本感觉不到有什么不同，只是可能有一点操作上的延时。

$('.user_avatar_btn').click(function(){
    $('.user_avatar').trigger('click');
})

选择文件后自动提交

在用户选择文件后，我们还可以设置自动提交文件，实现自动完成的功能，减少用户的操作，具体实现方法就是在文件域绑定一个change事件，当里面的值发生变化的时候，自动提交他的父级表单。

$('.user_avatar').change(function(){
    $(this).parent('form').submit();
})

---

好了今天就介绍到这里，也许后面还有什么想说的，下次想起来了在更新。