Struts2+Jquery.uploadify实现的文件上传特效示例代码

来源:互联网 发布:哪些明星有淘宝店 编辑:程序博客网 时间:2024/05/22 16:44

你先要下载uploadify插件的一个版本,例如:jquery.uploadify-v2.1.0.zip,解压得到其中的几个关键文件即可开始下面的示例。

上传显示页面<uploadFileDemo.jsp>的代码:

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  
<html>  
<head>  
<style type="text/css">
body {
 font: 12px/16px Arial, Helvetica, sans-serif;
}
#fileQueue {
 width: 400px;
 height: 300px;
 overflow: auto;
 border: 1px solid #E5E5E5;
 margin-bottom: 10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传演示</title>
<link href="/xndt/include/css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/xndt/include/js/jquery1.4.2.js" ></script>
<script language="javascript"  src="/xndt/include/js/jquery.uploadify.swfobject.js"></script>
<script language="javascript"  src="/xndt/include/js/jquery.uploadify.js"></script>
 
    <script type="text/javascript">
     function showResult(){//删除显示的上传成功结果  
          $("#result").html("");  
        }  
   
    $(document).ready(function() {
        $('#fileInput').uploadify({  
 'uploader'       : '/xndt/include/swf/uploadify.swf',
        'script': '/xndt/uploadifyAction!uploadFile.action',   //指定服务端处理类的入口
        'folder': 'temp',  
 'cancelImg'      : '/xndt/images/cancel.png',
        'fileDataName': 'fileInput', //和input的name属性值保持一致就好,Struts2就能处理了  
        'queueID': 'fileQueue',  
        'auto': false,//是否选取文件后自动上传  
        'multi': true,//是否支持多文件上传
        'simUploadLimit' : 5,//每次最大上传文件数  
        'buttonText': 'Browse Files',//按钮上的文字  
        'displayData': 'percentage',//有speed和percentage两种,一个显示速度,一个显示完成百分比   
        'onComplete': function (event, queueID, fileObj, response, data){  
                   $("#result").html(response);//显示上传成功结果  
                  setInterval("showResult()",2000);//两秒后删除显示的上传成功结果  
          } 
          
        });  
          
    });  

</script>  
  </head>  
    
  <body>  
   <div id="fileQueue"></div>  
  <input type="file" name="fileInput" id="fileInput" />  &nbsp;&nbsp;&nbsp;&nbsp;
      
<a href="javascript:$('#fileInput').uploadifyUpload();"  >开始上传</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
<a href="javascript:$('#fileInput').uploadifyClearQueue();"  >取消上传队列</a> <br>  <br> 

    <div id="result"></div><!--显示结果-->  
     
  </body>  
</html> 


 

服务端处理类<UploadFileDemoAction.java>的代码

 

 package com.sun.demoAction;
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;  

public class UploadFileDemoAction extends ActionSupport {  
 private File fileInput;  
 private String fileInputFileName;//Struts2的拦截器FileUploadInterceptor根据请求对象中参数"fileInput"来自行生产的一个固有属性

 public File getFileInput() {  
  return fileInput;  
 }  

 public void setFileInput(File fileInput) {  
  this.fileInput = fileInput;  
 }  


 public String getFileInputFileName() {  
  return fileInputFileName;  
 }  

 public void setFileInputFileName(String fileInputFileName) {  
  this.fileInputFileName = fileInputFileName;  
 }  

 @SuppressWarnings("deprecation")  
 public String uploadFile() throws Exception {  

  String savePath = ServletActionContext.getRequest().getRealPath("");

  savePath = savePath + "/uploadFile/";    

  String extName = "";//扩展名  
  String newFileName= "";//新文件名
  System.out.println("原文件名称:" + fileInputFileName);
  //获取扩展名  
  if(fileInputFileName.lastIndexOf(".") > -1){  
   extName = fileInputFileName.substring(fileInputFileName.lastIndexOf("."));  
  }  

  String nowTime = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());//当前时间
  newFileName = nowTime + extName;  
  System.out.println("保存的文件名称:" + savePath + newFileName);

  fileInput.renameTo(new File(savePath + newFileName));  

  HttpServletResponse response = ServletActionContext.getResponse();  
  response.setCharacterEncoding("utf-8");
  response.getWriter().print("成功上传文件《" + fileInputFileName + "》!");  

  return null; //这里不需要页面转向,所以返回空就可以了   
 }

 

该Action的在XML中的映射信息:

<action name="uploadifyAction" class="com.sun.demoAction.UploadFileDemoAction" method="uploadFile"/>

 

注意事项:

1:需要去重写struts2的配置文件struts.properties中的以下属性的值,

例如:

struts.multipart.saveDir=d:/aaa            // 设置Struts2的拦截器FileUploadInterceptor处理过程中临时文件的存放路径
struts.multipart.maxSize=4294967296  // 设置上传文件大小,最大支持到4GB
struts.multipart.parser=jakarta