首页 > 代码库 > Struts2文件上传带进度条,虽然不是很完美
Struts2文件上传带进度条,虽然不是很完美
好久没有写东西,最近在做个项目,要用到文件h 传的,以前虽然也做上传,但是总觉得不好用 ,现在和队友合作做了一个带进度条的上传,觉得还行~~和大家分享一下。
首先说一下大概是这样实现的,在我们平时的上传表单里面,除了文件上传之外,也许还有其他的信息需要填写的,这样问题就来了:点击上传按钮之后,这个表单都封装并提交上去了,在上传完成后整个页面就跳转了。而且也不利于我们验证用户输入。很多人这样做的,把这2个操作分开,当然这样也行。。。
我们这样做:一个普通页面(可以用于填写所有信息的),一个文件上传页面,一个上传成功页面(这个不怎么重要)
然后关键的就是:把文件上传的页面嵌入到普通页面里面去,相当于说文件上传实际是由上传页面独立完成,信息填写页面也独立成功信息填写,这里我们用iframe。
不多说,上代码:
1、处理上传的Action
Java代码
- package org.yzsoft.upload.action;
- import java.io.*;
- import org.apache.struts2.ServletActionContext;
- import com.opensymphony.xwork2.ActionSupport;
- public class UploadAction extends ActionSupport {
- private static final int BUFFER_SIZE = 100;// 上传的字符流大小(单位:字节)
- // 用File来封装上传文件域对象
- private File file;
- // 保存文件的目录路径(通过自动注入)
- private static String ext; //文件后缀
- private static String fileFileName;
- private static float percent = 0;//百分比
- // 自己封装的一个把源文件对象复制成目标文件对象
- private static void copy(File src, File dst) {
- InputStream in = null;
- OutputStream out = null;
- float completedSize = 0;//已经上传的大小
- float fileSize = 0;//文件总大小
- try {
- in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE);
- out = new BufferedOutputStream(new FileOutputStream(dst), BUFFER_SIZE);
- fileSize = in.available();
- byte[] buffer = new byte[BUFFER_SIZE];
- int len = 0;
- while ((len = in.read(buffer)) > 0) {
- out.write(buffer, 0, len);
- completedSize += (long) len;
- percent = completedSize / fileSize * 100;//百分比计算
- }
- } catch (Exception e) {
- System.out.println(e);
- } finally {
- if (null != in) {
- try {
- in.close();
- } catch (IOException e) {
- System.out.println(e);
- }
- }
- if (null != out) {
- try {
- out.close();
- } catch (IOException e) {
- System.out.println(e);
- }
- }
- }
- }
- public String sumPre() { //计算后百分比输回页面
- try {
- PrintWriter out = ServletActionContext.getResponse().getWriter();
- System.out.println(getFileFileName() + " filename");
- out.print(percent);
- } catch (IOException e) {
- System.out.println("异常:" + e);
- }
- return null;
- }
- //上传的方法
- public String upload() {
- try {
- if (percent >= 99.9) {//这里保险起见我们设百分比》99.9就清0,避免进度条到了100%就停在那里不动的尴尬
- percent = 0;
- }
- File srcfile = this.getFile();// 自动注入的方法取得文件域的对象
- // 根据服务器的文件保存地址和原文件名创建目录文件全路径
- String uploadPath = ServletActionContext.getServletContext().getRealPath("upload");// 上传路径
- ext = fileFileName.substring(fileFileName.lastIndexOf(".")).toLowerCase();// 取得后缀
- System.out.println("取得后缀 " + ext);
- File dstFile = new File(uploadPath, fileFileName);
- copy(srcfile, dstFile);
- } catch (Exception e) {
- System.out.println(e);
- }
- return "success";
- }
- /**************/
- 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;
- }
- }
2、上传表单页面(就是我们平时普通的表单页面,样式有点乱。不理它了。嘻嘻~~~)
Java代码
- <%@ 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=http://www.mamicode.com/"<%=basePath%>">
- <title>My JSP ‘index.jsp‘ starting page</title>
- </head>
- <body>
- <form action="upload_doCreate.action" method="post" name="form" >
- <table id="table2" width="99%" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <th>文件上传</th>
- </tr>
- <tr>
- <td ><table border="0" cellpadding="0" cellspacing="0" style="width:100%">
- <tr>
- <td align="left"> </td>
- </tr>
- <tr>
- <td width="100%">
- <table border="0" cellpadding="2" cellspacing="1" style="width:100%">
- <tr>
- <td align="right">文件名:</td>
- <td><input type="text" id="filename" value=http://www.mamicode.com/""/></td>
- </tr>
- <tr>
- <td align="right">文件路径:</td>
- <td><iframe style="width: 400px;height: 25px" scrolling=‘no‘ frameborder=‘0‘ resizable=‘no‘ allowtransparency=‘true‘ cellspacing=‘0‘ border=‘0‘ src=http://www.mamicode.com/‘fileupload.jsp‘ id=‘iframeupload‘></iframe></td>
- </tr>
- </table>
- <br />
- </td>
- </tr>
- </table></td>
- </tr>
- <tr>
- <td colspan="2" align="center" height="50px">
- <input type="Submit" name="Submit" value=http://www.mamicode.com/"保存" class="button" />
- <input type="button" name="Submit2" value=http://www.mamicode.com/"返回" class="button" onclick="window.history.go(-1);"/></td>
- </tr>
- </table>
- </form>
- </body>
- </html>
3、上传进度条页面(注意,这个是用一个iframe的源文件链接实现的)
Java代码
- <%@ 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=http://www.mamicode.com/"<%=basePath%>">
- <script type="text/javascript" src=http://www.mamicode.com/"jquery-1.6.2.min.js">
- </script>
- <style type="text/css">
- <!--
- body {
- margin-left: 0px;
- margin-top: 0px;
- margin-right: 0px;
- margin-bottom: 0px;
- font-size: 14px;
- }
- -->
- </style>
- <script type="text/javascript">
- function aa() {
- $("#div1").hide();
- $("#div2").show();
- $.post("sumPre", {}, function(data) {//AJAX方式发送请求到Action的sumPre方法,计算后将百分比data返回来
- $("#img").attr("width", parseInt(data) * 1.5);//设置进度条长度,这里*1.5只是为了把进度条显示长一点,好看一点
- $("#p").html(parseInt(data) + "%");//进度百分比
- });
- window.setTimeout("aa()", 10);//定时执行
- }
- </script>
- </head>
- <body>
- <div id="div1">
- <form name=‘aform1‘ method=‘post‘ action="fileUpload.action"
- enctype="multipart/form-data">
- <input name=‘file‘ type=‘file‘ />
- <input type="submit" value=http://www.mamicode.com/"上传" onclick="return aa();" />
- </form>
- </div>
- <div id="div2" style="width: 400px; display: none;">
- 正在上传...
- <img alt="" src=http://www.mamicode.com/"13221820.gif" width="16" height="16">
- <img id="img" alt="" src=http://www.mamicode.com/"percent.jpg" width="1" height="5">
- <span id="p" style="position: absolute; right: 30%; top: 0px;"></span>
- </div>
- </body>
- </html>
4、上传成功后的页面(就是一个简单的页面)
Java代码
- <%@ 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=http://www.mamicode.com/"<%=basePath%>">
- <style type="text/css">
- <!--
- body {
- margin-left: 0px;
- margin-top: 5px;
- margin-right: 0px;
- margin-bottom: 0px;
- font-size: 14px;
- }
- -->
- </style>
- </head>
- <body>
- 上传成功
- </body>
- </html>
5、Struts.xml 配置文件
Java代码
- <!DOCTYPE struts PUBLIC
- "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
- "http://struts.apache.org/dtds/struts-2.0.dtd">
- <!-- Author: yzx -->
- <struts>
- <constant name="struts.multipart.maxSize" value=http://www.mamicode.com/"61440000000"></constant>
- <package name="fileUpload" namespace="/" extends="struts-default">
- <action name="fileUpload" class="org.yzsoft.upload.action.UploadAction" method="upload">
- <result name="success">/filejd.jsp</result>
- </action>
- <action name="sumPre" class="org.yzsoft.upload.action.UploadAction" method="sumPre">
- </action>
- </package>
- </struts>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。