其实在这之前,已经发过几篇与文件上传相关的文章;只是比较散、不太系统;
恰好最近一直在搞文件上传问题,借此机会,再梳理一遍....
1. 技能图
“React技能图 2018”
最近火了,我也粗略模仿了一张
“文件上传技能图 2018”
2. 服务器端处理文件上传
服务器端处理文件上传技术分2类:
详细内容,猛戳这里:怎么处理文件上传?
3. IE8、9,单文件上传
IE8、9环境下,只能用 form 上传文件,而且 <input type="file"> 只能单选;
效果:
代码:
注意:
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 上传文件;
效果:
代码:
最后总结一下:
这次重点写的是文件上传的“前端解决方案”,涵盖了低版本浏览器以及现代浏览器的单文件、多文件上传技术;