iframe+struts2文件上传实时进度条

最新推荐文章于 2017-12-04 15:14:59 发布

MjCreator

最新推荐文章于 2017-12-04 15:14:59 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

分类专栏： struts2 文章标签： iframe+struts2文件上传实时进度条

本文链接：https://blog.youkuaiyun.com/MjCreator/article/details/84775815

struts2 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于JSP的文件上传系统实现方案，包括前端页面设计与进度条显示，以及后端处理流程。通过Struts2框架完成文件接收与服务器端文件保存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前台jsp内容：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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%>">
    
    <title>My JSP 'index.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" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<script type="text/javascript" src="bootstrap/js/jquery-1.11.1.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		//这个方法用于提交表单
		function submitFile() {
			$("#fileForm").attr("action","myFileUpload");
			$("#fileForm").submit();
		}
		//接收后台返回的数据并进行处理
		function upload(msg) {
			if(msg == "服务器异常") {
				$("#msgSpan").html("服务器异常");
			}else {//获取到文件上传的进度,设置进度条的宽度
				var progressPercent = parseFloat(msg);
				var progressWidth = $("#progressParentDiv").width()*progressPercent;
				$("#progressId").width(progressWidth);
			}
		}
	</script>
  </head>
  
  <body>
    <form id="fileForm" action="myFileUpload" method="post" enctype="multipart/form-data" target="fileIframe">
    	<input type="file" name="file"/>
    	<input id="submitButton" type="button" value="上传" onclick="submitFile();">
    </form>
    <div id="progressParentDiv" class="progress" style="margin-left:5px;margin-right:5px;">
		<div id="progressId" class="progress-bar" role="progressbar" aria-valuenow="60" 
				aria-valuemin="0" aria-valuemax="100" style="width: 0;">
		</div>
	</div>
	<span id="msgSpan"></span>
    <iframe id="fileIframe" name="fileIframe"></iframe>
  </body>
</html>

后台controller：

package cn.bdx.controller;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class TestFileUpload extends ActionSupport {

	private File file;
	private String fileFileName;
	private String fileContentType;

	/**
	 * 接收前台发送的参数
	 */
	public void testFileUpload() {
		HttpServletResponse resp = ServletActionContext.getResponse();
		HttpServletRequest req = ServletActionContext.getRequest();
		resp.setContentType("text/html;charset=utf-8");// 设置返回消息的字符集
		resp.setHeader("pragma", "no-cache");
		resp.setHeader("cache-control", "no-cache");
		resp.setHeader("expires", "0");
		// 获取文件上传到服务器的文件路径(我这里是上传到项目的upload文件夹中)
		String root = ServletActionContext.getServletContext().getRealPath("/upload");
		try {
			InputStream is = new FileInputStream(file);
			OutputStream os = new FileOutputStream(new File(root,fileFileName));

			byte[] buffer = new byte[1024];
			long length = 0;
			double progressLength = 0;
			double totalLength = file.length();// 文件总长度
			double progressPercent = 0;// 文件上传进度
			while ((length = is.read(buffer, 0, buffer.length)) != -1) {
				os.write(buffer);
				progressLength += length;
				progressPercent = progressLength / totalLength;
				this.sendMsg(resp, "parent.upload("+progressPercent+")");
			}
			os.close();
			is.close();
		} catch (IOException e) {
			e.printStackTrace();
			this.sendMsg(resp, "parent.upload('服务器异常')");
		}
	}

	/**
	 * 向客户端发送消息
	 * 
	 * @param resp
	 * @param msg
	 * @throws IOException
	 */
	private void sendMsg(HttpServletResponse resp, String msg) {
		PrintWriter out = null;
		try {
			out = resp.getWriter();
		} catch (IOException e) {
			e.printStackTrace();
			out.println("<script type='text/javascript'>parent.upload('服务器异常')</script>");
		}
		out.println("<script type='text/javascript'>" + msg + "</script>");
		out.println("----------------------------------------");
		out.println("----------------------------------------");
		out.println("----------------------------------------");
		out.println("----------------------------------------");
		out.println("----------------------------------------");
		out.flush();
	}

	public File getFile() {
		return file;
	}

	public void setFile(File file) {
		this.file = file;
	}

	public String getFileFileName() {
		return fileFileName;
	}

	public void setFileFileName(String fileFileName) {
		this.fileFileName = fileFileName;
	}

	public String getFileContentType() {
		return fileContentType;
	}

	public void setFileContentType(String fileContentType) {
		this.fileContentType = fileContentType;
	}

}

struts.xml文件：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
	<constant name="struts.enable.DynamicMethodInvocation" value="true" />
	<constant name="struts.devMode" value="true" />
	<constant name="struts.multipart.maxSize" value="550000000"/>
	<package name="default" namespace="/" extends="struts-default">
		<action name="myFileUpload" class="cn.bdx.controller.TestFileUpload" method="testFileUpload"></action>
	</package>
</struts>

web.xml文件,这个只是struts2的配置需要，也贴在这里，

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

	<display-name>Struts Blank</display-name>

	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	
</web-app>

再导入struts2需要的jar包就可以运行了。

注：这里使用单个iframe在上传2M以上的文件时总是感觉非常的慢,暂时不知道什么原因造成的，希望了解的能够指点一下，非常感谢。