A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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, 下载次数: 11)

1.jpg

1 个回复

倒序浏览
我来占层楼啊   
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马