侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

基于Ajax技术实现文件上传带进度条

前端  /  管理员 发布于 4年前   225

1.概述

在实际的Web应该开发或网站开发过程中,经常需要实现文件上传的功能。在文件上传过程中,经常需要用户进行长时间的等待,为了让用户及时了解上传进度,可以在上传文件的同时,显示文件的上传进度条。运行本实例,如图1所示,访问文件上传页面,单击“浏览”按钮选择要上传的文件,注意文件不能超过50MB,否则系统将给出错误提示。选择完要上传的文件后,单击“提交”按钮,将会上传文件并显示上传进度。

2.技术要点

主要是应用开源的Common-FileUpload组件来实现分段文件上传,从而实现在上传过程中,不断获取上传进度。下面对Common-FileUpload组件进行详细介绍。

Common-FileUpload组件时Apache组织下的jakarta-commons项目下的一个子项目,该组件可以方便地将multipart/form-data类型请求中的各种表单域解析出来。该组件需要另一个名为Common-IO的组件的支持。这两个组件包文件可以到http://commons.apache.org网站上进行下载。

(1)创建上传对象

在应该Common-FileUpload组件实现文件上传时,需要创建一个工厂对象,并根据该工厂对象创建一个新的文件上传对象,具体代码如下:

DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory); 

(2)解析上传请求

创建一个文件上传对象后,就可以应用该对象来解析上传请求,获取全部的表单项,可以通过文件上传对象的parseRequest()方法来实现。parseRequest()方法的语法结构如下:

public List parseRequest(HttpServletRequest request) throws FileUploadException 

(3)FileItem类

在Common-FileUpload组件中,无论是文件域还是普通表单域,都当成FileItem对象来处理。如果该对象的isFormField()方法返回值为true,则表示是一个普通表单域,否则为一个文件域。在实现文件上传时,可以通过FileItem类的getName()方法获得上传文件的文件名,通过getSize()方法获得上传文件的大小。

3.具体实现

(1)创建request.js文件,在该文件中编写Ajax请求方法。

(2)新建文件上传页index.jsp,在该页中添加用于获得上传文件信息的表单以及表单元素,并添加用于显示进度条的<div>标签和显示百分比的<span>标签,关键代码如下:

<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">

请选择上传的文件:<input name="file" type="file" size="34">

注:文件大小请控制在50M以内。

<div id="progressBar" class="prog_border" align="left"><img src="//article/images/progressBar.gif" width="0" height="13" id="imgProgress"></div><span id="progressPercent" style="width:40px;display:none">0%</span><input name="Submit" type="button" value="提交" onClick="deal(this.form)"><input name="Reset" type="reset" class="btn_grey" value="重置"></td></form> 

(3)新建上传文件的Servlet实现类UpLpad。在该类中编写实现文件上传的方法uploadFile(),在该方法中通过Common-FileUpload组件实现分段上传文件,并计算上传百分比,实时保存到Session中,关键代码如下:

public void uploadFile(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=GBK");request.setCharacterEncoding("GBK");HttpSession session=request.getSession();session.setAttribute("progressBar",0); //定义指定上传进度的Session变量String error = "";int maxSize=50*1024*1024; //单个上传文件大小的上限DiskFileItemFactory factory = new DiskFileItemFactory(); //创建工厂对象ServletFileUpload upload = new ServletFileUpload(factory); //创建一个新的文件上传对象try {List items = upload.parseRequest(request); // 解析上传请求Iterator itr = items.iterator(); // 枚举方法while (itr.hasNext()) {FileItem item = (FileItem) itr.next(); //获取FileItem对象if (!item.isFormField()) { // 判断是否为文件域if (item.getName() != null && !item.getName().equals("")) {//是否选择了文件long upFileSize=item.getSize(); //上传文件的大小String fileName=item.getName(); //获取文件名if(upFileSize>maxSize){error="您上传的文件太大,请选择不超过50M的文件";break;}// 此时文件暂存在服务器的内存中File tempFile = new File(fileName); //构造文件目录临时对象String uploadPath = this.getServletContext().getRealPath("/upload");File file = new File(uploadPath,tempFile.getName()); InputStream is=item.getInputStream();int buffer=1024; //定义缓冲区的大小int length=0;byte[] b=new byte[buffer];double percent=0;FileOutputStream fos=new FileOutputStream(file);while((length=is.read(b))!=-1){percent+=length/(double)upFileSize*100D; //计算上传文件的百分比fos.write(b,0,length); //向文件输出流写读取的数据session.setAttribute("progressBar",Math.round(percent)); }fos.close();Thread.sleep(1000); //线程休眠1秒} else {error="没有选择上传文件!";}}}} catch (Exception e) {e.printStackTrace();error = "上传文件出现错误:" + e.getMessage();}if (!"".equals(error)) {request.setAttribute("error", error);request.getRequestDispatcher("error.jsp").forward(request, response);}else {request.setAttribute("result", "文件上传成功!");request.getRequestDispatcher("upFile_deal.jsp").forward(request, response);}} 

(4)在文件上传页index.jsp中,导入编写的Ajax请求方法的request.js文件,并编写获取上传进度的Ajax请求方法和Ajax回调函数,关键代码如下:

<script language="javascript" src="//article/js/request.js"></script><script language="javascript">var request = false;function getProgress(){ var url="showProgress.jsp"; //服务器地址var param ="nocache="+new Date().getTime(); //每次请求URL参数都不同 ,避免上传时进度条不动request=httpRequest("post",url,true,callbackFunc,param); //调用请求方法 }//Ajax回调函数function callbackFunc(){if( request.readyState==4 ){ //判断响应是否完成 if( request.status == 200 ){ //判断响应是否成功var h = request.responseText; //获得返回的响应数据,该数据位上传进度百分比h=h.replace(/\s/g,""); //去除字符串中的Unicode空白符document.getElementById("progressPercent").style.display=""; //显示百分比 progressPercent.innerHTML=h+"%"; //显示完成的百分比document.getElementById("progressBar").style.display="block"; //显示进度条document.getElementById("imgProgress").width=h*(235/100); //显示完成的进度}}}</script> 

(5)编写showProgress.jsp页面,在该页中应用EL表达式输出保存在session域中的上传进度条的值,具体代码如下:

<%@page contentType="text/html" pageEncoding="GBK"%>${progressBar} 

(6)编写表单提交按钮onclick事件所调用的JavaScript方法,在该方法通过window对象的setInterval()方法每隔一定时间请求一次服务器,获得最新的上传进度,关键代码如下:

function deal(form){form.submit(); //提交表单timer=window.setInterval("getProgress()",500); //每隔500毫秒获取一次上传进度}

以上所述是小编给大家介绍的基于Ajax技术实现文件上传带进度条的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!


  • 上一条:
    基于Ajax技术实现考试倒计时并自动提交试卷
    下一条:
    AjaxToolKit之Rating控件的使用方法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客