Struts2 文件上传进度条的实现实例代码

2024-09-29 00:19:42

最近在写我们大三项目的一个视频文件上传的页面，实现后台对上传的进度进行监听，然后将监听的信息返回给前台页面。

前台的页面效果图：

前台进度条控件选择使用easyui 的progressbar控件。

详细的使用说明参考官网文档：http://www.jeasyui.com/documentation/index.php

所有需要引入jquery-1.11.1.min.js 以及jquery.easyui.min.js

一.前台的代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <base href="<%=basePath%>" rel="external nofollow" >
  <title>My JSP 'uploadVideo.jsp' starting page</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <link rel="stylesheet" href="demo.css" rel="external nofollow" />
  <link rel="stylesheet" href="easyui.css" rel="external nofollow" />
  <link rel="stylesheet" href="icon.css" rel="external nofollow" />
  <script type="text/javascript" src="jquery.min.js" ></script>
  <script type="text/javascript" src="jquery.easyui.min.js" ></script>
  <link rel="stylesheet" href="videoCss/upload.css" rel="external nofollow" />
  <script>
  $(function() {
    var pro=0;
    $("#save").click(function(){
      saveDate();
      setinterval=setInterval(showUploadProgress, 100);
    });
    function saveDate(){
    var form = new FormData(document.getElementById("form"));
      $.ajax({
        type:"POST",
        url:"uploadfile.action",
        data:form,
        async:false,
        cache:false,
        processData:false,
        contentType:false,
        success:function(result){
          var msg=result.msg;
          $(".msg").text(msg);
        },
        error:function(){
          alert("file异步提交失败");
        }
      });
    }

    function showUploadProgress(){
      $.ajax({
        type:"GET",
        url:"uploadProgress.action",
        dataType:"json",
        async:false,
        cache:false,
        success:function(result){
          var progressInfo=result.progressInfo;
          pro=progressInfo.percent;
          if(pro==100){
            clearInterval(setinterval);
          }
          $('#progress').progressbar('setValue', progressInfo.percent);
          $('progress-bar-status').find(".speed").text(progressInfo.velocity);
          $('progress-bar-status').find(".finished").text("已上传:"+progressInfo.length+"/"+progressInfo.totalLength);
          $('progress-bar-status').find(".remain").text(progressInfo.timeLeft);
        },
        error:function(result){
           alert("error1");
        }
      });
    }

  });
  </script>
 </head>

  <body>
    <div class="main_wrapper">
        <div class="head_wrapper">
          <div class="headinside">
            <ul>
              <li><a href="">主站</a></li>
              <li><a href="">视频栏</a></li>
              <li><a href="">资源区</a></li>
              <li><a href="">个人中心</a></li>
            </ul>
          </div>
        </div><!--head_wrapper结束-->
        <div class="upload_box">
          <p id="error">
            <s:fielderror name="struts.messages.error.content.type.not.allowed"></s:fielderror>
            <s:actionerror/>
            <font color="red" class="msg">${msg }</font>
          </p>
           <div class="uploadInfo">
           <span class="title">
             当前上传：
             <span class="filename">文件名</span>
           </span>
           <div id="progress" class="easyui-progressbar" style="width:400px;"></div>
           <div class="progress-bar-status">
             <span class="speed" style="display: none;">当前上传的速度:80.23k/s</span>
             <span class="finished">已上传:10.86M/10.86M</span>
             <span class="remain" style="display:none">剩余时间:00秒</span>
           </div>
           <div class="videoInfo">
           <form method="post" enctype="multipart/form-data" id="form">
             <ul>
               <li>
                 <div>
                   <label for="video1">文件上传</label>
                    <input type="file" id="btn_file" name="video"/>
                 </div>
               </li>
               <li>

                   <label for="name">标题</label>
                   <input type="text" name="name" id="name" title="标题" placeholder="给你的视频七个标题名吧"/>

               </li>
               <li>
                 <div>
                   <label for="cate">分类</label>
                   <select class="cate" id="cate" name="cate">
                   <option value ="1">传统文学</option>
                   <option value ="2">民间手工艺</option>
                   <option value="3">节假日常</option>
                  </select>
                </div>
               </li>
               <li>
                 <div>
                   <label for="tag">标签</label>
                   <input type="text" name="tag" id="tag" placeholder="请给您的视频添加相应的标签"/>
                 </div>
               </li>
               <li>
                 <div>
                   <label for="desc" id="label_desc">描述</label>
                   <textarea name="videoDesc" id="desc" placeholder="请添加相应的视频描述" >
                   </textarea>
                 </div>
               </li>
               <input id="save" type="button" value="保存"/>
               <!-- <button id="save">保存</button> -->
             </ul>
           </form>
           </div>
        </div>
        </div>
    </div>
    <div style="width: 100%;">
         <div class="footer" style="width: 100%;">
           <div class="inner">
             <p class="a_menu">
               <a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于我们</a>
               <i class="line">|</i>
               <a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系合作</a>
               <i class="line">|</i>
               <a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >帮助中心</a>
               <i class="line">|</i>
               <a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >合伙人计划</a>
               <i class="line">|</i>
               <a target="_blank" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >版权声明</a>
             </p>
             <p class="center">
               <span>江西师范大学瑶湖校区</span>
               <span>java工作室</span>
               <br>
               copyright&copy 大白
             </p>
           </div>
         </div>
       </div>
   </body>
</html>

二.点击上传后，如何获得文上传的进度信息。

　　1.自定义一个UploadListener类实现org.apache.commons.fileupload中的ProgressListener接口，从而获得当前上传的文件的已读取的数据长度，文件总长度，正在保存第几个文件；

　　2.重写一个MyMultiPartRequest类，覆盖org.apache.struts2.dispatcher.multipart.JakartaMultiPartRequest，改写parseRequest方法，在其中为上传添加监听器；

　　3.定义一个UploadStatus bean类存放上传的状态信息，并将获得上传进度信息的UploadStatus对象存在在Session域中;

　　4.编写UploadListenAction，获取Session域中的UploadStatus对象，进行相应的数据处理，然后将需要的数据放入Map中以json的形式返回给jsp;

　　5.编写UploadFile.action，实现文件的上传存储;

三.相对应的代码。

package video.action;

import org.apache.commons.fileupload.ProgressListener;

public class UploadListener implements ProgressListener {
  private UploadStatus status;

  public UploadListener(UploadStatus status) {
    this.status = status;
  }

   public void update(long bytesRead, long contentLength, int items) {
      // 上传组件会调用该方法
      status.setBytesRead(bytesRead); // 已读取的数据长度
      status.setContentLength(contentLength); // 文件总长度
      status.setItems(items); // 正在保存第几个文件

   }

}

对于步骤2中MyMultiPartRequest修改后的方法代码。

protected List<FileItem> parseRequest(HttpServletRequest servletRequest, String saveDir) throws FileUploadException {
     UploadStatus status = new UploadStatus(); // 上传状态
     UploadListener listner = new UploadListener(status); // 监听器
     servletRequest.getSession().setAttribute("uploadStatus", status);//将上传的进度状态存放进Session;

     DiskFileItemFactory fac = createDiskFileItemFactory(saveDir);
     ServletFileUpload upload = createServletFileUpload(fac);

     upload.setProgressListener(listner);// 添加监听器
    return upload.parseRequest(createRequestContext(servletRequest));
  }

package video.action;

public class UploadStatus {
  private long bytesRead; // 已经上传的字节数，单位：字节
  private long contentLength; // 所有文件的总长度，单位：字节
  private int items; // 正在上传第几个文件
  private long startTime = System.currentTimeMillis(); // 开始上传的时间，用于计算上传速度等

  public long getBytesRead() {
    return bytesRead;
  }

  public void setBytesRead(long bytesRead) {
    this.bytesRead = bytesRead;
  }

  public long getContentLength() {
    return contentLength;
  }

  public void setContentLength(long contentLength) {
    this.contentLength = contentLength;
  }

  public int getItems() {
    return items;
  }

  public void setItems(int items) {
    this.items = items;
  }

  public long getStartTime() {
    return startTime;
  }

  public void setStartTime(long startTime) {
    this.startTime = startTime;
  }
}

package video.action;

import java.util.HashMap;
import java.util.Map;

import org.apache.struts2.interceptor.SessionAware;

import com.opensymphony.xwork2.ActionSupport;

public class UploadListenAction extends ActionSupport implements SessionAware{
  private UploadStatus status;
  Map<String,Object> session;
  Map<String,String> progressInfo=new HashMap<>();
  @Override
  public String execute() throws Exception {
    // TODO Auto-generated method stub
    status=(UploadStatus)session.get("uploadStatus");
    if(status!=null){
      long startTime = status.getStartTime(); //上传开始时间
      long currentTime = System.currentTimeMillis(); //现在时间
      long time = (currentTime - startTime)/ 1000 + 1; //已传输的时间 单位:s
      //传输速度单位:byte/s
      double velocity = ((double)status.getBytesRead()/1000) / (double)time;
     //估计总时间
      double totalTime = status.getContentLength()/velocity;
     //估计剩余时间
      double timeLeft = totalTime - time;
      //已经完成的百分比
      int percent = (int)(100 * (double)status.getBytesRead() / (double)status.getContentLength());
      //已经完成数单位:m
      double length = ((double) status.getBytesRead())/1024/1024;
      //总长度 单位:m
      double totalLength = ((double) status.getContentLength())/1024/1024;
      progressInfo.put("percent", String.valueOf(percent));
      progressInfo.put("velocity", String.valueOf(velocity));
      progressInfo.put("totalTime", String.valueOf(totalTime));
      progressInfo.put("timeLeft", String.valueOf(timeLeft));
      progressInfo.put("length", String.valueOf(length));
      progressInfo.put("totalLength", String.valueOf(totalLength));
    }

    return super.execute();
  }
  @Override
  public void setSession(Map<String, Object> session) {
    // TODO Auto-generated method stub
    this.session=session;
  }
  public Map<String, String> getProgressInfo() {
    return progressInfo;
  }

  /*public UploadStatus getStatus() {
    return status;
  }*/

}

package video.action;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Map;

import javax.servlet.ServletContext;

import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.SessionAware;

import video.dao.UploadDao;
import video.daoimpl.UploadDaoImpl;
import videomodel.VideoInfo;
import cn.history.pojo.User;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class UploadFile extends ActionSupport{
  private static final long serialVersionUID = 4182168930616232826L;
  private String name;  //标题名
  private File video;
  private String videoFileName;
  private String videoContentType;
  private String videoDesc;  //描述
  private int cate;      //类型
  private String tag;      //标签
  /*private VideoInfo videoInfo=new VideoInfo();*/
  private String msg;

  private UploadDao uploadDao=new UploadDaoImpl();
  public String upload() throws Exception{
    //完成上传
    ServletContext sc=ServletActionContext.getServletContext();
    String directory=sc.getRealPath("/video");//得到存放文件的真是目录
    //根据视频的不同类型，存放在不同的目录下
    if(cate==1){  //如果是传统文学
      directory=directory+"/guoxue";
    }else if(cate==2){
      directory=directory+"/minjian";
    }else{
      directory=directory+"/jiari";
    }
    SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmssS");//格式化时间输出
    String Rname=null;
    if(name!=null&&!name.equals("")){
      Rname=name+"_"+sdf.format(new Date())+".mp4";
    }else{
      Rname=videoFileName;
    }
    System.out.println(Rname);
    //构建目标文件
    File target=new File(directory,Rname);
    FileUtils.copyFile(video, target);
    System.out.println(Rname+"\n"+videoFileName+"\n"+videoDesc+"\n"+videoContentType);
    //将成功上传的视频基本信息保存至数据库m
    String filePath=target.getPath();
    filePath=filePath.substring(filePath.indexOf("video")).replace("\\", "/");
    System.out.println(filePath);
    VideoInfo videoInfo=new VideoInfo();
    videoInfo.setVideoName(Rname);
    videoInfo.setVideoDesc(videoDesc);
    videoInfo.setVideoUrl(filePath);
    videoInfo.setCate(cate);
    videoInfo.setTag(tag);
    //ActionContext.getContext().getSession().get("name");
    if(ActionContext.getContext().getSession().get("user")!=null){
      User user=(User) ActionContext.getContext().getSession().get("user");
      videoInfo.setAuthorId(user.getUser_id());
    }else{
      //设置为管理员的id，默认是管理员上传的
      videoInfo.setAuthorId(1);
    }
    int tag=uploadDao.saveVideo(videoInfo);
    if(tag==0){
      msg="上传失败(存储数据库过程出错)";
      return INPUT;
    }else{
      msg="视频上传成功";
    }
    return SUCCESS;
  }

/*  public VideoInfo getVideoInfo() {
    return videoInfo;
  }

  public void setVideoInfo(VideoInfo videoInfo) {
    this.videoInfo = videoInfo;
  }*/

  /*public String getName() {
    return name;
  }*/

  public void setName(String name) {
    this.name = name;
  }

//  public File getVideo() {
//    return video;
//  }

  public void setVideo(File video) {
    System.out.println(video);
    this.video = video;
  }

//  public String getVideoDesc() {
//    return videoDesc;
//  }
  public void setVideoDesc(String videoDesc) {
    this.videoDesc = videoDesc;
  }

  /*public int getCate() {
    return cate;
  }*/

  public void setCate(int cate) {
    this.cate = cate;
  }

  /*public String getTag() {
    return tag;
  }*/

  public void setTag(String tag) {
    this.tag = tag;
  }

//  public String getVideoFileName() {
//    return videoFileName;
//  }

  public void setVideoFileName(String videoFileName) {
    this.videoFileName = videoFileName;
  }

  /*public String getVideoContentType() {
    return videoContentType;
  }*/

  public void setVideoContentType(String videoContentType) {
    this.videoContentType = videoContentType;
  }
  public String getMsg() {
    return msg;
  }
  public void setMsg(String msg) {
    this.msg = msg;
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Struts2拦截器登录验证实例

Struts2拦截器 Struts2拦截器的概念和Spring Mvc拦截器一样. 1.Struts2拦截器是在访问某个Action或Action的某个方法,字段之前或之后实施拦截,并且Struts2拦截器是可插拔的,拦截器是AOP的一种实现． 2.拦截器栈(Interceptor Stack).Struts2拦截器栈就是将拦截器按一定的顺序联结成一条链.在访问被拦截的方法或字段时,Struts2拦截器链中的拦截器就会按其之前定义的顺序被调用. 使用拦截器的第一步: 自定义我的权限拦截器Chec
详解struts2的token机制和cookie来防止表单重复提交

详解struts2的token机制和cookie来防止表单重复提交今天在做一个投票系统时要实现防止表单重复提交! 当时就想到了用struts2提供的token机制 struts2的token机制防止表单重复提交: 首先需要在提交的jsp页面(要使用token机制,必须使用struts2提供的标签库)加上 <s:token></s:token> 这段代码,然后在struts.xml里面需要进行如下配置: <action name="token" class
struts2框架入门

如果你之前在MVC模式的时候一直都是通过servlet,获取和返回数据,那么现在开始学习struts2框架,Struts是一个实现MVC设计模式的优秀的框架.它的许多优点我就不说了. 我用自己做的一张图说明servlet和struts2的区别. 写一个最基本的开发步骤,完成开发. (1)创建WEB 工程 (2)导入必要jar包 (3) 编写JSP 页面 (4)编写Action 服务器端处理逻辑 (5)进行框架配置we
Struts2实现上传单个文件功能

upload.jsp 这个页面选择提交文件,提交到uploadImage.action <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/
Struts2之Validator验证框架的详细介绍

Struts2中提供了数据校验验证数据例如验证邮件.数字等.验证方式有3种:一是通过validate()方法,二是通过Xml,三是使用注解方式. 一.初始化首先定义一个User类 package com.cyw.test; import java.util.Date; public class User { private String name; private int age; private String email; public String getName() { return n
struts2如何使用拦截器进行用户权限控制实例

大多数网站会设置用户权限,如过滤非法用户,用户不登录时不能进行访问,或者设置访问的权限,如部分内容仅对VIP开放等等,这些权限的控制都可以用struts2中的拦截器来实现. 下面通过一个简单的Demo来模拟这种用户权限控制的实现流程,设定三种不同身份的用户,commen为普通用户,VIP为会员用户,还有一种admin为管理员. 先看一下Demo的整体结构: 首先搭建struts2框架的开发环境(前面博客中有介绍),环境搭建完之后又再看一看如何配置struts.xml: <?xml version
Struts2访问Servlet的三种方式

基本介绍在Struts2中,Action并没有直接和Servlet API耦合.虽然Struts2 中的Action访问Servlet API麻烦一些,但是这却是Struts2中Action的重要改良之一,方便Action进行单元测试. 尽管Action和Servlet API解耦会带来很多好处,然而在Action中完全不访问Servlet API几乎是不可能的,在实现业务逻辑时,经常要访问Servlet中的对象,如request.session和application等 . 在Struts2
Struts2的输入校验实例代码

在我们项目实际开发中在数据校验时,分为两种,一种是前端校验,一种是服务器校验: 客户端校验:主要是通过jsp写js脚本,它的优点很明显,就是输入错误的话提醒比较及时,能够减轻服务器的负担,但是客户端校验并不是安全的,简单来讲就是防君子防不了小人. 服务器端校验:最大特点就是数据安全,但是如果只有服务器端校验,会大大增加服务器端的负担. 所以一般在我们开发中,是客户端和服务器端校验相结合作用的. 那这篇文章,我只讲服务器端校验,在Struts2支持两种校验方式: 代码校验 :在服务器通过
Struts2 文件上传进度条的实现实例代码

最近在写我们大三项目的一个视频文件上传的页面,实现后台对上传的进度进行监听,然后将监听的信息返回给前台页面. 前台的页面效果图: 前台进度条控件选择使用easyui 的progressbar控件. 详细的使用说明参考官网文档:http://www.jeasyui.com/documentation/index.php 所有需要引入jquery-1.11.1.min.js 以及jquery.easyui.min.js 一.前台的代码: <%@ page language="java"
HTML5 Ajax文件上传进度条如何显示

原本打算使用jquery插件进行异步文件上传,比如uploadfy但是需要额外的支持,也有人用iframe模仿异步上传机制,感觉都比较别扭.因为项目不考虑低版本浏览器,所以决定用html5实现.下面只是一个简单的demo,具体样式需要自己去做. 后台基于strut2进行文件处理,具体因项目而定.只是要注意设置文件大小的限制. <constant name="struts.multipart.maxSize" value="52428800"/>这个配置
js HTML5 Ajax实现文件上传进度条功能

本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1. lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +
PHP利用APC模块实现文件上传进度条的方法

本文实例讲述了PHP利用APC模块实现文件上传进度条的方法.分享给大家供大家参考.具体分析如下: 以前的php5.2之前的版本是不能可使用APC模块的,因为之前的压根就没有这个APC模块,如果想使用APC模块实现上传进度条我们必须是php5.2或更高版本. 从5.2开始APC加入了一个叫APC_UPLOAD_PROGRESS的东东,解决了困扰大家已久的进度条问题.并且它把原来的上传时把临时文件全部缓存到内存改成了当临时文件达到设定值时就自动保存到硬盘,有效地改善了内存利用状况. 它的作用原理是在
PHP中使用Session配合Javascript实现文件上传进度条功能

Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前,实现这样的进度条并不容易,主要有三种方法: 1.使用Flash, Java, ActiveX 2.使用PHP的APC扩展 3.使用HTML5的File API 第一种方法依赖第三方的浏览器插件,通用性不足,且易带来安全隐患.不过由于Flash的使用比较广泛,因此还是有很多网站使用Flash作为解决方案. 第二种方法的不足
jQuery实现简单的文件上传进度条效果

本文实例讲述了jQuery实现文件上传进度条效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title> <link rel="stylesheet" type="text/css" href=&quo
jQuery实现文件上传进度条特效

上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过.刚好这周没什么东西了,就拿这个来充一下数吧. 文件上传,得先准备一个"按钮": 这个看上去还是不错的吧,实现也是很简单的: <span class="upload-span">开始上传文件</span> <button>太
基于jquery ajax的多文件上传进度条过程解析

这篇文章主要介绍了基于jquery ajax的多文件上传进度条过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果图前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> <meta name="viewport" content="width=device-width,initia
Android 下载文件通知栏显示进度条功能的实例代码

1.使用AsyncTask异步任务实现,调用publishProgress()方法刷新进度来实现(已优化) public class MyAsyncTask extends AsyncTask<String,Integer,Integer> { private Context context; private NotificationManager notificationManager; private NotificationCompat.Builder builder; public M
layui(1.0.9)文件上传upload,前后端的实例代码

因为公司还在使用老版本的layui,文件上传在新版本中全部重写了,这里记录下老版本layui的文件上传. 前端代码:(引入layui相关包) <input type="file" lay-type="file" id="xxxxx" name="file" class="layui-upload-file"> 这里可以参考layui官方文档,有一点需要注意,name属性是必需的,当你选择好文件后

Struts2 文件上传进度条的实现实例代码

相关推荐

随机推荐