`

Uploadify在Struts2中的应用

阅读更多

步骤一: 到官网上下载uploadify的JS文件.
Uploadify在线演示:在线Demo

Uploadify配置参数及接口文档:http://www.uploadify.com/documentation

Uploadify插件下载地址:http://www.uploadify.com/download

--------------------------------------------------------------------
步骤二:下载好uploadify压缩包文件后,解压文件包。在文件夹中找到以下五个文件,并添加到项目的对应路径中:
    jquery.uploadify.v2.1.0.js
   swfobject.js
   uploadify.swf
   uploadify.css
   cancel.png

步骤三:加入struts2的jar包、struts.xml ,在web.xml中加入struts2的FilterDispatcher过滤器。

----------------------------------------------------------------------------------------------------------------------------------

1、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 href="css/default.css" rel="stylesheet" type="text/css" />
      <link href="css/uploadify.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
       <script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#uploadify").uploadify({
                'uploader'       : 'uploadify.swf', //是组件自带的flash,用于打开选取本地文件的按钮
                'script'         : 'uploadAction!uploadFile.action',//处理上传的路径,这里使用Struts2是XXX.action
                'cancelImg'      : 'image/cancel.png',//取消上传文件的按钮图片,就是个叉叉
                'folder'         : 'uploads',//上传文件的目录
                'fileDataName'   : 'uploadify',//和input的name属性值保持一致就好,Struts2就能处理了
                'queueID'        : 'fileQueue',
                'auto'           : false,//是否选取文件后自动上传
                'multi'          : true,//是否支持多文件上传
                'simUploadLimit' : 2,//每次最大上传文件数
                'buttonText'     : 'BROWSE',//按钮上的文字
                'displayData'    : 'speed',//有speed和percentage两种,一个显示速度,一个显示完成百分比
                'fileDesc'       : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
                'fileExt'        : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
                'onComplete'     : function (event, queueID, fileObj, response, data){
                   $("#result").html(response);//显示上传成功结果
                  setInterval("showResult()",2000);//两秒后删除显示的上传成功结果
                }
            });
        });
       
        function showResult(){//删除显示的上传成功结果
          $("#result").html("");
        }
        function uploadFile(){//上传文件
         jQuery('#uploadify').uploadifyUpload();
        }
        function clearFile(){(){//清空所有上传队列
            jQuery('#uploadify').uploadifyClearQueue();
        }
        </script>
  
  </head>
 
  <body>
    <div id="fileQueue"></div>
        <input type="file" name="uploadify" id="uploadify" />
        <p>
        <a href="javascript:uploadFile()">开始上传</a>&nbsp;
        <a href="javascript:clearFile()">取消所有上传</a>
        </p>
        <div id="result"></div><!--显示结果-->
  </body>
</html>

----------------------------------------------------------------------------------------------------------------------------------

2、web.xml

<filter>
  <filter-name>struts2</filter-name>
  <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
 </filter>
 <filter-mapping>
  <filter-name>struts2</filter-name>
  <url-pattern>/*</url-pattern>
 </filter-mapping>

----------------------------------------------------------------------------------------------------------------------------------

3、struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

 <package name="struts2" extends="struts-default">
   <action name="uploadAction" class="com.lijigou.action.UploadAction" method="uploadFile">
   </action>
    </package>
</struts>

----------------------------------------------------------------------------------------------------------------------------------

4、action代码

package com.lijigou.action;

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

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class UploadAction extends ActionSupport {

 private File uploadify;
 
 private String uploadifyFileName;
 
 
 
 @SuppressWarnings("deprecation")
 public String uploadFile() throws Exception {
 
 
  String extName = "";//扩展名
 
  String newFileName= "";//新文件名
 
  String nowTime = new SimpleDateFormat("yyyymmddHHmmss").format(new Date());//当前时间
 
  String savePath = ServletActionContext.getRequest().getRealPath("");
 
  savePath = savePath +"/uploads/";
  HttpServletResponse response = ServletActionContext.getResponse();
  response.setCharacterEncoding("utf-8");
 
  //获取扩展名
  if(uploadifyFileName.lastIndexOf(".")>=0){
   extName = uploadifyFileName.substring(uploadifyFileName.lastIndexOf("."));
  }
  newFileName = nowTime+extName;
 
  uploadify.renameTo(new File(savePath+newFileName));
 
  response.getWriter().print(uploadifyFileName+"上传成功");
 
       return null; //这里不需要页面转向,所以返回空就可以了

 }


 public File getUploadify() {
  return uploadify;
 }


 public void setUploadify(File uploadify) {
  this.uploadify = uploadify;
 }


 public String getUploadifyFileName() {
  return uploadifyFileName;
 }


 public void setUploadifyFileName(String uploadifyFileName) {
  this.uploadifyFileName = uploadifyFileName;
 }

}

以上代码都通过测试,没有问题的。

 

分享到:
评论
1 楼 seraphice 2011-03-22  
想请问一下我打开想上传的文件后,出现http::500错误。调试发现没有调用UploadAction。不知楼主是否遇到过?

相关推荐

    Uploadify结合Struts2上传demo

    本教程将围绕"Uploadify结合Struts2上传demo"这一主题,详细介绍如何在Struts2框架下集成Uploadify实现文件上传功能。 首先,我们需要在项目中引入Uploadify的相关资源。这通常包括JavaScript库(uploadify.js)和...

    Struts2uploadify3.1

    在Struts2中,处理文件上传通常涉及到`org.apache.struts2.interceptor.FileUploadInterceptor`拦截器和`org.apache.struts2.components.File`标签。然而,由于Struts2自身的限制或版本兼容性问题,有时候直接使用...

    jquery.uploadify+Struts2整合配置

    在IT领域,jQuery Uploadify与Struts2的整合是一个常见的前端文件上传解决方案。这个整合能够为Web应用提供高效、用户友好的文件上传功能。现在,我们来深入探讨这个主题。 首先,jQuery是一个轻量级、高性能的...

    uploadify3与struts2结合实现有进度条文件上传实例

    1 判断session是否失效 本实例没测试这个问题 但在工作项目中碰到了 但原因在这里记录下:web应用会存在一个session 而uploadify上传时也会产生一个新的session 导致在后台判断session是否失效时获取的session为null...

    超帅的文件上传插件Uploadify在Struts2中的应用,完整详细实例!

    —》最近由于项目需要使用到一个上传插件,在网上发现uploadify挺不错,所以决定使用它,但是官网文档和例子是php的,而项目是SSI框架的,所以自己对uploadify在struts2中的使用进行了一番研究,最终实现了。...

    jquery+uploadify + struts2 + jsp 图片批量上传Demo

    在本文中,我们将深入探讨如何使用jQuery、Uploadify、Struts2和JSP技术实现一个图片批量上传的Demo。这个组合提供了高效、用户友好的文件上传解决方案,特别适合需要处理大量图片的Web应用。 首先,jQuery是一个轻...

    uploadify和struts2工程实例

    在Struts2中,我们需要配置一个Action来处理文件上传请求。这个Action通常会包含一个`@Result`注解,指定文件保存的路径,以及一个`@Param`注解的属性,用于接收上传的文件。同时,为了处理多文件上传,我们还需要...

    uploadify struts2实现图片上传

    在Struts2中,我们可以创建Action类来接收并处理来自前端的请求,包括文件上传。 要将uploadify与Struts2整合,首先需要在HTML页面中引入uploadify的JavaScript和CSS文件,然后配置uploadify的参数,例如指定服务器...

    uploadify+struts2多文件上传实例

    在本实例中,`uploadify`与`Struts2`结合解决了Firefox下的session问题。通常,由于浏览器的安全策略和同源策略,异步上传时可能会遇到session丢失的问题,尤其是Firefox对cookie的处理更为严格。`Uploadify`通过...

    JQuery_uploadify_struts2_jsp__ajax多文件上传

    标题中的"JQuery_uploadify_struts2_jsp__ajax多文件上传"涉及到的是一个使用jQuery、uploadify插件、Struts2和JSP技术实现的AJAX多文件上传功能。这个功能允许用户在不刷新页面的情况下,上传多个文件到服务器。 ...

    Uploadify + Struts2 实现文件上传详解

    在Struts2中,我们需要创建一个处理文件上传的Action类,继承自`ActionSupport`并覆写`execute`方法。同时,需要在`struts.xml`中定义这个Action,指定接收文件的参数名,如下: ```xml ...

    uploadify+struts2+json前台动态向后台传数据

    在Struts2中创建一个Action,用于接收文件上传请求。使用`@Result`注解定义结果类型,如`json`,并使用`@Parameters`注解获取前端发送的参数。 ```java import org.apache.struts2.interceptor.ParameterAware; ...

    jquery.uploadify3.2在struts2中使用的完整工程

    【jQuery Uploadify 3.2在Struts2中的应用】 jQuery Uploadify 3.2是一个流行的前端文件上传插件,它允许用户通过Ajax技术实现异步、多文件上传功能,大大提升了用户界面的交互性和用户体验。这个完整的工程是将...

    uploadify上传struts

    在IT行业中,"uploadify上传struts"是一个关于前端文件上传和后端Struts框架集成的议题。Uploadify是一款流行的JavaScript插件,用于在Web应用中实现非阻塞式的文件上传功能,它提供了友好的用户体验和高度的自定义...

    struts2+uploadify(2.1.4)的文件上传

    在Struts2中集成Uploadify,我们需要理解以下几个关键知识点: 1. **Struts2文件上传基础**:Struts2支持文件上传,通过使用`&lt;s:file&gt;`标签,我们可以创建一个文件输入字段。然后,需要在Action类中定义一个对应的...

    Struts2实现Uploadify多文件上传

    在Struts2中,你需要创建一个Action类来处理文件上传请求。这个Action类需要继承`org.apache.struts2.dispatcher.multipart.MultiPartRequest`,以便处理多个文件。同时,定义相应的私有属性,这些属性将用于接收...

    struts2_uploadify带进度条的多文件上传下载

    Struts2 Uploadify是一个在Java Web开发中常用的插件,它结合了Struts2框架和Uploadify jQuery插件,能够实现文件的多选、上传进度显示以及后台处理等功能。这个项目示例提供了一个完整的解决方案,使得用户在上传多...

    struts2+uploadify小李子

    Struts2和Uploadify是两种在Web开发中用于处理文件上传功能的技术。Struts2是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它提供了一种结构化的方式来组织和控制应用程序的流程。Uploadify则是一...

    struts1 uploadify 多文件上传

    在这个场景中,我们将讨论如何在Struts1框架中集成Uploadify实现多文件上传功能。 首先,我们需要在项目中引入Uploadify的相关资源。这包括JavaScript文件(如uploadify.js)和CSS文件,通常放在项目的公共资源目录...

    struts2 jquery.uploadify

    这个简单的demo展示了如何在Struts2应用中集成jQuery Uploadify,以便提供用户友好的、多文件异步上传体验。下面我们将深入探讨这个知识点。 首先,我们来了解jQuery Uploadify。Uploadify是一个基于jQuery的插件,...

Global site tag (gtag.js) - Google Analytics