黑马程序员技术交流社区

标题: 【西安校区】基于FileUpload组件实现文件上传进度条的显示 [打印本页]

作者: 西安Java组 时间: 2018-5-28 13:13
标题: 【西安校区】基于FileUpload组件实现文件上传进度条的显示
1、技术背景
  文件上传是JaveWeb常见功能，目前文件上传的技术也是五花八门，这其中Apache旗下的commons-fileupload组件是使用比较广泛的一个文件上传的开源组件，基于commons-fileupload实现文件上传操作简单，并且commons-fileupload还提供了获得文件上传进度的接口，基于此，开发者就可以在页面上实时动态的显示文件上传的进度，很大程度提高用户的体验。

2、技术分析
2.1、文件上传三要素:
      表单的提交方式必须为POST方式
      表单中提供文件项
      将表单的enctype设置为multipart/form-data
2.2、文件上传的步骤:
      创建磁盘文件工厂对象
      创建核心的解析类对象
      设置监听文件上传进度的监听器，以便获得文件上传的进度
      解析请求，获得表单项的集合对象
      遍历表单项的集合
      判断当前的表单项是否是文件项
      如果是普通文本项，获得参数的名称和值
      如果是文件项，获取文件内容，使用流写入到服务器磁盘中
2.3、进度条分析
      页面上动态变化的进度条其实是一个具有背景色的div块，让这个div块的宽度随着文件上传的进度的多少而变化就是进度条。这其中要解决的问题是如何实时获得文件上传的进度，并且页面在文件没有上传结束前不能跳转。显然，此时要从服务器获得文件上传的进度必须使用异步请求的方式。服务器端可以将当前文件上传的进度放置在Session域中，前台间隔一段时间通过Ajax异步的方式从服务器端的Session中获得文件上传的进度，并更新div的宽度。

3、代码实现
3.1、HTML代码:

运行效果:

3.2、Javascript代码:

3.3、文件上传的Servlet:

3.4、获得文件进度的Servlet:

3.5、实现效果

1.jpg (78.47 KB, 下载次数: 34)

作者: Yin灬Yan 时间: 2018-5-29 10:57
我来占层楼啊

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2