uploadify来自国外的一款优秀jQuery插件,主要功能是批量上传文件,此插件在项目中已被广泛之用。本文用uploadify和struts2来实现上传,需要一些插件和jar包。uploadfiy这个插件是基于js里面的jquery库写的。结合了ajax和flash,实现了这个多线程上传的功能,这些插件可以从官网下载得到,Struts2的jar就不多说了。
首现是JSP的代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多文件上传</title>
<script type="text/javascript" src="uploadify/jquery.js"></script>
<script type="text/javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.v2.0.1.js"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
<script type="text/javascript">
jQuery(document).ready(function(){
//API http://www.cnblogs.com/mahaisong/archive/2011/06/25/2090075.html
$('#upload').uploadify(
//alert("ddd");
{
onSelect :function(event,ID,fileObj){
$("#myfile").val(fileObj.name);
},
'uploader' : 'uploadify/uploadify.swf',
'script' : 'upload.action',
'cancelImg' : 'uploadify/cancel.png',
'folder' : '/uploads',
'auto' :false, //是否自动开始
'multi' : true, //是否支持多文件上传
'buttonText' : 'BROWSE', //按钮上的文字
'simUploadLimit' : 1, //一次同步上传的文件数目
'sizeLimit' : 204800000000000, //设置单个文件大小限制,单位为byte
'queueSizeLimit' : 5, //队列中同时存在的文件个数限制
'fileDataName': 'uploadify',
'displayData' : 'percentage',
//.jpg .gif .jpeg .png .bmp
'fileDesc' : '请选择文件', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
//'*.jpg;*.gif;*.jpeg;*.png;*.bmp'
'fileExt' : '*.doc;*.docx;*.pdf;*.wps', //允许的格式
'height' : 34, //设置浏览按钮的宽度 ,默认值:110
'width' : 118,//设置浏览按钮的高度 ,默认值:30。
'buttonImg' : 'uploadify/picture.jpg',
'simUploadLimit' : 2, //允许同时上传的个数 默认值:1 。
'wmode' : 'transparent' ,
onComplete : function (event, queueID, fileObj, response, data){
$('<li></li>').appendTo('.files').text(response);
$("#result").html(response);//显示上传成功结果
},
onError : function(event, queueID, fileObj){
alert("文件:" + fileObj.name + " 上传失败");}
});
});
</script>
</head>
<body>
<span><input type="text" id="myfile" size="30"/>允许上传的文档格式有:doc,docx,wps,pdf</span>
<div>
<input type="file" name="uploadify" id="upload">
</div>
<div id="list"></div>
<div>
<input type="button" value="开始上传" onclick="javascript:jQuery('#upload').uploadifyUpload()"/>
<!-- <a href="javascript:jQuery('#upload').uploadifyClearQueue()">取消所有上传</a> -->
</div>
<div id="result"></div><!--显示结果-->
</body>
</html>
uploadify的一些配置就在jQuery(document).ready(function()这个函数中,具体看注释。
Struts.XML的代码:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
"http://struts.apache.org/dtds/struts-2.1.7.dtd">
<struts>
<constant name="struts.devMode" value="true" />
<constant name="struts.i18n.encoding" value="utf-8"/><!--解决中文字符的问题 -->
<constant name="struts.multipart.maxSize" value="909715200000" />
<constant name="struts.multipart.saveDir" value="d:/aaa" />
<constant name="struts.multipart.parser" value="jakarta" />
<package name="authority" extends="struts-default">
<action name="upload" class="action.UploadAction">
<result name="success" type="dispatcher">
index.jsp
</result>
</action>
</package>
</struts>
struts.multipart.saveDir是Struts2拦截器保存缓存处理文件的目录。
后台action的代码:
package action;
import java.io.File;
import java.util.UUID;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UploadAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private File uploadify;
private String uploadifyFileName;
@Override
public String execute() {
try {
String OriginalName=uploadifyFileName;//原来的名字
//改名
String extName = "";//扩展名
String newFileName= "";//新文件名
System.out.println("原文件名称:" + OriginalName);
//获取扩展名
if(uploadifyFileName.lastIndexOf(".") > -1){
extName = uploadifyFileName.substring(uploadifyFileName.lastIndexOf("."));
}
String filePath = "D:/Struts2.2/upload/";
File path = new File(filePath);
if (!path.exists()) {
path.mkdirs();
}
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
newFileName = uuid + extName;
System.out.println("保存的文件名称:" + filePath + newFileName);
uploadify.renameTo(new File(filePath + newFileName));//修改文件名 ,并上传文件
//打印上传成功信息
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8");
response.getWriter().print("文件上传成功!"+"<a href=#>"+OriginalName + "</a>");
} catch (Exception e) {
e.printStackTrace();
}
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;
}
}
这段代码对文件进行了改名,用了uuid的方法。文件保存的路径是:D:/Struts2.2/upload/。
运行结果截图:
允许上传的文件类型可以修改uploadify的参数。
开始上传后的结果为:
这个上传程序暂时还无法上传txt文件,不知道为什么,还有一些问题,希望能与大家共同讨论!