Ajax技术——带进度条的文件上传

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="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="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毫秒获取一次上传进度
}
时间: 2024-10-17 14:35:43

Ajax技术——带进度条的文件上传的相关文章

ajax实现带进度条的文件上传

jsp部分:设计一个表单,form的属性添加 enctype="multipart/form-data",设计一个iframe,设为隐藏.form的target等于iframe的name; servlet部分:文件上传用的Commons-FileupLoad,需要两个Jar,commons-fileupload和commons-io,少了第二个会报出找不到类的异常: 第一个servlet处理上传,及把上传进度保存到session,第二个servlet处理ajax请求,回传session

带进度条的文件上传

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

带进度的多文件上传(支持上传.doc后缀的word文档并在线预览)

原文:带进度的多文件上传(支持上传.doc后缀的word文档并在线预览) 源代码下载地址:http://www.zuidaima.com/share/1550463556848640.htm 演示地址:http://img.zeroteam.net/     访问路径和自己工程的设置有关 如:http://localhost:8081/strutd2_fileupload/index.jsp

Dropzone带进度显示多文件上传插件

插件效果 默认状态 选中文件 上传进度 插件下载,网盘链接 插件调用示例 <link rel="stylesheet" type="text/css" href="dropzone/dropzone.css"> <script type="text/javascript" src="dropzone/dropzone.js"></script> <style typ

JQuery和Servlet实现文件上传进度条,能显示上传速度,上传的百分比等

原文:JQuery和Servlet实现文件上传进度条,能显示上传速度,上传的百分比等 源代码下载地址:http://www.zuidaima.com/share/1550463319542784.htm JQuery和Servlet实现文件上传进度条,能显示上传速度,上传的百分比等

PHP+Ajax异步带进度条上传文件

前端引入文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="

带进度条的文件批量上传插件uploadify

有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另一版本HTML5版本需要付费) 下载地址: http://www.uploadify.com/download/ 下载后直接把文件解压,然后放在项目中 二. 在项目中使用 在页面中引入: <!--引入Jquery--> <script src="js/jquery-1.11.3.m

WebApi实现Ajax模拟Multipart/form-data方式多文件上传

前端页面代码: <input type="file" class="file_control" /><br /> <input type="file" class="file_control" /><br /> <input type="file" class="file_control" /> <button id=&q

第65篇 AJAX初识 校验用户名 登录示例 文件上传 csrftoken

1, 知识储备 2. AJAX的定义 异步的JavaScript和XML 使用场景: JavaScript和后端的数据传递 2.1原生的JavaScript实现AJAX 2.2 JQuery实现 2.3验证用户名是否存在 或者 3.csrftoken问题的解决 4文件上传 原文地址:https://www.cnblogs.com/cavalier-chen/p/9949390.html