浅谈HTML5中的新加入File API文件上传

在HTML5中新加入了File API，可以很方便的让我们将文件上传到服务端，以往的旧版本HTML上传文件，只能通过第三方的插件比如Flash等上传，新加入的File API给了我们更多的方法去控制文件上传进度和信息。

目前网页上传分为三种：

• Form提交：一般传统的模式
• Flash上传：需要用户安装Flash Player播放器
• 插件上传：比如说浏览器控件，QQ空间就是这种模式

以上的方法可以说各种利弊，Form提交就是没进度条而且需要，而且中途不能中断，否则会导致上传失败。

Flash比较难搞的就是在非ie中浏览器认为Flash是新窗口会话，当前网页的cookie无法传递到Flash上传工具中，而针对这个一般就 是用JS把当前页面中的cookie通过Flash再传给后台，而对于一个后台如果使用了统一验证身份的接口 那可能会有点麻烦。

第三种优势很明显，比如适合如QQ空间这样用户需要大批量上传图片的，缺点也显而易见：跨浏览器上存在问题。而HTML5中的 FileReader对象与as3中的很像，只不过目前as3中的方法比这个多(有兴趣可以自己去看看adobe的lives docs，对比一下两者的区别与共同点)。

讲了这么多，回到我们本文的重点：HTML File API。

文件单选和多选

如何控制用户单选、多选。as3中是两个不同的对象：FileReference、FileReferenceList，在as3中可以 使用FileFilter过滤只允许选择的上传文件。as3中需要使用flash player 10+才支持本地预览，而且图片不易过大。

HTML5中允许选择多个文件：

<input type="file" multiple>

只允许上传一个文件：

<input  type="file" single>

指定上传格式

如何让用户只能上传指定的文件格式，如上传图片组件只允许png、jpg、gif、jpeg、bmp后缀格式的图片。

我尝试着去寻找HTML5中是否也如as3中可以让开发者自定义过滤选择文件呢，结果被我找到了http://en.wikipedia.org/wiki/File_select  添加一个属性就好了

accept="image/gif,image/png"

默认是显示我们限制的文件格式，但是如果用户点击所有类型的文件，一样可以显示全部文件。

AJAX上传文件

这里遇到一个问题，如何获取ajax发送过去的图片信息。因为在ajax中使用的是setRequestHeader将图片信息传给后台，因为使用的nginx，无法直接获取

自定义的http-header，就修改了fastcgi-params，加了三项：

关于定义的配置规则，可以参考这一篇文章：nginx下php获取自定义请求头参数的方法