专栏首页WebJ2EEWEB:还是文件上传...

WEB:还是文件上传...

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

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

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 上传文件;

效果:

代码:

最后总结一下:

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

本文分享自微信公众号 - WebJ2EE(WebJ2EE),作者:WEBJ2EE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 文件上传:终结篇

    这是第四次写与文件上传有关的文章,这一篇主要是结合最近遇到的问题,对之前的文章进行整理、汇总和补充,推出《文件上传:终结篇》;

    WEBJ2EE
  • Fetch:新一代Ajax API

    一直以来,我们使用的Ajax技术,实际是由各浏览器的XMLHttpRequest(XHR)对象实现。但由于XHR接口难用而且落后(不能Promise),所以实际...

    WEBJ2EE
  • Web存储(Web Storage)

    Web 存储允许我们在浏览器里保存简单的 key/value 数据。与 Cookie 相比,Web 存储方式更直观、存储空间更大(一般不超过 5MB);

    WEBJ2EE
  • Eclipse下的webBrowser问题

    自从重装系统后,就有一个问题一直在困扰着我,他就是Eclipse下的WebBrowser,当使用内置浏览器调试时,没有问题,使用外部浏览器调试时,用IE可以,但...

    无邪Z
  • 嫌网盘下载文件太慢,这有免费的文件分享方法助你快速分享与下载!

    欢迎回来,可能大家在平常都有会遇到给别人分享大型文件的时候,将文件上传网盘也需要不少的时间,下载又非常的慢,然后又不得不开会员解决下载的问题。因此号主今天就给大...

    FreeRonin
  • “看看”就能操作,SyncThink的这项专利让VR随你眼动

    VRPinea
  • 如何在 Windows 10 中移除 Internet Explorer 浏览器 如何通过控制面板删除 Internet Explorer 浏览器通过 PowerShell 删

    现在 Internet Explorer (IE)已经过时了,可以通过控制面板移除这个古老但是依然是一个伟大的浏览器

    林德熙
  • 直播礼物系统设计要点

    送礼是直播业务里的核心功能,随着业务的发展,围绕着送礼功能会衍生各种周边功能,如增加几种排行榜,建立一种荣誉体系等。

    QQ音乐技术团队
  • Selenium设置浏览器为手机模式自定义大小

    插曲最近在奋力学习web自动化中,这里简单分享一下从他人学习的方法,学代码切勿光看不练,定个目标每天空余时间学习基础代码章节,敲个50行代码

    测试小兵
  • 轻量级Qt键盘-中文输入

    中文输入候选栏ChineseWidget使用QListWidget和样式表实现:

    Qt君

扫码关注云+社区

领取腾讯云代金券