WEB：还是文件上传...

其实在这之前，已经发过几篇与文件上传相关的文章；只是比较散、不太系统；

• HTML5：File API
• Fetch：新一代Ajax API
• 怎么处理文件上传？

恰好最近一直在搞文件上传问题，借此机会，再梳理一遍....

1. 技能图

“React技能图 2018”

最近火了，我也粗略模仿了一张

“文件上传技能图 2018”

2. 服务器端处理文件上传

服务器端处理文件上传技术分2类：

• Servlet 2.x 环境下，需要借助commons-fileupload解析multipart类型请求；
• Servlet 3.x 环境下，可以使用Servlet内置逻辑完成multipart类型请求的解析；

详细内容，猛戳这里：怎么处理文件上传？

3. IE8、9，单文件上传

IE8、9环境下，只能用 form 上传文件，而且 <input type="file"> 只能单选；

效果：

代码：

注意：

• 要确保 form 元素的属性正确设置： method = "POST" 、 enctype = "multipart/form-data"；
• 用 iframe + JSP 实现上传成功后回调；

4. IE8、9，多文件上传

IE8、9 的 <input type="file"> 一次只支持选择一个文件；如果想实现多文件上传，靠谱的解决方案是用 Flash（例：Uploadify）；

效果：

代码：

特别注意：Uploadify 并不是在一个请求中发送所有文件，而是每个文件一个请求；

至此

低版本浏览器中的文件上传技术

介绍完了

下面介绍

现代浏览器中的文件上传技术

5. 现代浏览器，Form文件上传

现代浏览器中的 <input type="file"> 组件能力增强了，可以直接实现“多文件上传”；

效果：

代码：

注：浏览器会在一个请求中，将选中的文件上传上去；

6. 现代浏览器，Ajax文件上传

现代浏览器中，最牛的特性就是可以用 File API 读取文件、用 Fech API 或 XMLHttpRequest Level 2 上传文件；

效果：

代码：

最后总结一下：

这次重点写的是文件上传的“前端解决方案”，涵盖了低版本浏览器以及现代浏览器的单文件、多文件上传技术；