`

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

阅读更多

前台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以上的文件时总是感觉非常的慢,暂时不知道什么原因造成的,希望了解的能够指点一下,非常感谢。

分享到:
评论

相关推荐

    Struts2+上传进度条完美运行

    在这个“Struts2+上传进度条完美运行”的主题中,我们将深入探讨如何在Struts2框架下实现文件上传功能,并结合进度条展示上传进度,提供用户友好的交互体验。 1. **Struts2文件上传**: Struts2通过`struts2-core`...

    struts文件带进度条上传,文件下载

    在本主题中,“struts文件带进度条上传,文件下载”指的是在Struts框架下实现带有进度条的文件上传与下载功能,同时解决中文乱码问题,并确保兼容各种浏览器。 **文件上传** 在Struts中,文件上传通常使用`struts2...

    tiles+struts2配置文件

    2. **配置struts-plugin.xml**:在Struts2的配置文件struts-plugin.xml中,我们需要启用Tiles插件。添加以下配置: ```xml &lt;constant name="struts.tiles.enabled" value="true"/&gt; &lt;constant name="struts.action...

    【ASP.NET编程知识】asp.net单文件带进度条上传的解决方案.docx

    知识点2:使用ASP.NET缓存机制实现文件上传进度条显示 在本文中,我们使用ASP.NET缓存机制来实现文件上传进度条的显示。ASP.NET缓存机制能够帮助我们缓存文件上传的信息,从而实现进度条的显示。在本文中,我们使用...

    spring mvc文件上传实现进度条

    在Spring MVC框架中,文件上传是一项常见的功能,而实现文件上传进度条则能提供更好的用户体验。这个场景通常涉及到前端的JavaScript或jQuery库(如jQuery File Upload)与后端的Spring MVC控制器之间的交互,以及...

    可爱的iframe+div

    在"可爱的iframe+div"的场景中,可能是指利用div进行布局,然后在某个特定的区域使用iframe嵌入其他内容。例如,可能有一个div作为导航栏,而iframe则用来显示动态更新的内容,如新闻、天气预报或社交媒体 feed。...

    java+Struts+oracle实现文档上传下载、在线预览功能

    通过以上技术的综合运用,"java+Struts+oracle实现文档上传下载、在线预览功能"项目能够提供一套完整的文档管理解决方案,满足企业对文件存储、共享和预览的需求。在开发过程中,还需要考虑到性能优化、错误处理和...

    struts2文件上传模板

    Struts2 文件上传模板是一个基于Java的Web应用框架——Struts2实现的文件上传功能示例。这个模板展示了如何在不刷新整个页面的情况下,通过使用IFrame技术来处理文件上传请求,提供用户友好的交互体验。 在Struts2...

    带进度条的多文件上传struts

    在文件上传过程中,进度条通常通过监听文件上传的进度事件来实时更新。 最后,**plupload** 是一个跨浏览器的文件上传插件,支持多种运行环境,如Flash、HTML5、Silverlight和iFrame。plupload提供了一套完整的API...

    网页中上传文件时显示进度条

    在网页设计中,提供文件上传功能是常见的需求,而为了提升用户体验,显示上传进度条是一项重要的优化措施。本文将深入探讨如何使用AJAX技术来实现这一功能。 首先,我们需要了解AJAX(Asynchronous JavaScript and ...

    Iframe+Cookie实现简单的单点登录

    【标题】:“Iframe+Cookie实现简单的单点登录” 单点登录(Single Sign-On,SSO)是一种身份验证机制,允许用户在多个相互关联的应用系统中登录一次,然后在整个会话期间无需再次输入凭证即可访问这些系统。在本文...

    AJAXFileUpload ajax 异步文件上传 进度条

    1. 兼容性:虽然现代浏览器普遍支持AJAX异步文件上传,但老版本浏览器可能不支持,因此需要使用polyfill或者提供备用方案(如iframe上传)。 2. 文件大小限制:默认情况下,XMLHttpRequest对象对单个文件的大小有...

    JAVA实现模拟导入数据/上传文件进度条

    总的来说,实现一个文件上传进度条功能需要前后端的协同工作,通过Servlet处理文件上传,JSP提供交互界面,jQuery和Ajax负责前端与后端的通信,实时更新进度条状态。这个过程涉及到了多种技术的综合运用,对于提升...

    android webview 因iframe+target=“_blank “ 导致的页面无法正常打开或获取不到调整url

    然而,开发者时常会遇到一些棘手的问题,其中之一便是“android webview 因iframe+target=“_blank”导致的页面无法正常打开或获取不到调整url”。这个问题涉及到WebView的加载机制、iframe标签的特性和JavaScript...

    HTML5 postMessage+iframe实现文件跨域异步上传

    首先,我们创建一个包含文件上传表单的页面,表单需要设置`target`属性为一个`iframe`的ID,这样提交后会把结果加载到`iframe`中,而不会刷新整个页面。例如: ```html 上传 &lt;iframe id="uploadFrame" style=...

    Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    在***中实现无刷新文件上传并显示上传进度条涉及到一系列的前端和后端技术。首先,我们需要创建一个HTML页面,其中包含用于上传文件的表单以及显示上传进度的进度条。由于Ajax不能直接上传文件,无刷新上传文件的...

    iframe+postMessage实现跨域通信

    iframe+postMessage实现跨域通信 window.postMessage()方法安全地启用Window对象之间的跨源通信;例如,在页面和它产生的弹出窗口之间,或者在页面和嵌入其中的iframe之间。 

    plupload+jquery+java多文件上传下载功能

    4. **进度条显示**:提供实时的文件上传进度反馈,增强用户体验。 5. **自定义UI**:开发者可以根据需求定制上传界面,如选择文件按钮样式、文件列表展示等。 jQuery easyui是一个基于jQuery的UI框架,用于快速构建...

    javascript窗体类似div窗体iframe+div窗体

    1. **动态加载内容**:通过改变IFrame的`src`属性,可以实时更新IFrame中显示的内容,实现动态加载页面或API返回的数据。 2. **模拟弹出窗口**:利用div,我们可以创建可拖动、可关闭的浮动窗体,通过JavaScript...

Global site tag (gtag.js) - Google Analytics