文件上传插件Uploadify在Struts2中的应用,完整详细实例
最近由于项目需要使用到一个上传插件,在网上发现uploadify挺不错,所以决定使用它,但是官网文档和例子是php的,而项目是SSI框架的,所以自己对uploadify在struts2中的使用进行了一番研究,最终实现了。发现网上关于这方面的资料很少,而且有的一两篇例子还不大全,网友提问质疑很多,所以,下面我特将我的代码公布:
---------------------------------------------------------------------
步骤一: 到官网上下载uploadify的JS文件。注意,还得需要Jquery文件。还没有的朋友,自己到www.jquery.com上面找来下载吧。
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
---------------------------------------------------------------------
步骤三:书写JSP文件,以下截取核心部分。也就是和upload有关的代码。
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="<%=path %>/js/tech/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=path %>/js/tech/jquery/swfobject.js"></script>
<script type="text/javascript" src="<%=path %>/js/tech/jquery/jquery.uploadify.v2.1.0.js"></script>
<link href="<%=path %>/css/tech/jquery/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("#fileupload").uploadify({
/*注意前面需要书写path的代码*/
'uploader' : '<%=path%>/medium/jquery/uploadify.swf',
'script' : '<%=path%>/commonutil/uploadUtil.action',
'cancelImg' : '<%=path%>/pic/tech/jquery/uploadify/cancel.png',
'queueID' : 'fileQueue', //和存放队列的DIV的id一致
'fileDataName' : 'fileupload', //和以下input的name属性一致
'auto' : false, //是否自动开始
'multi' : true, //是否支持多文件上传
'buttonText' : 'Browse', //按钮上的文字
'simUploadLimit' : 3, //一次同步上传的文件数目
'sizeLimit' : 19871202, //设置单个文件大小限制
'queueSizeLimit' : 2, //队列中同时存在的文件个数限制
'fileDesc' : '支持格式:jpg/gif/jpeg/png/bmp.', //如果配置了以下的'fileExt'属性,那么这个属性是必须的
'fileExt' : '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式
onComplete: function (event, queueID, fileObj, response, data) {
$('<li></li>').appendTo('.files').text(response);
},
onError: function(event, queueID, fileObj) {
alert("文件:" + fileObj.name + "上传失败");
},
onCancel: function(event, queueID, fileObj){
alert("取消了" + fileObj.name);
}
});
});
</script>
<script type="text/javascript">
//必须的
function uploadifyUpload(){
$('#fileupload').uploadifyUpload();
}
</script>
......(该部分为其他无关的JSP代码,省略)
<tr>
<td>上传图片:</td>
<td>
<input type="file" name="fileupload" id="fileupload" />
<div id="fileQueue"></div>
<p>
<a href="javascript:;" onClick="javascript:uploadifyUpload()">开始上传</a>
<a href="javascript:jQuery('#fileupload').uploadifyClearQueue()">取消所有上传</a>
</p>
<ol class=files></ol>
</td>
</tr>
--------------------------------------------------------------------
步骤四:书写处理上传的ACTION类,下面给出实现代码:
public class UploadUtilAction extends ActionSupport{
private File fileupload; //和JSP中input标记name同名
//Struts2拦截器获得的文件名,命名规则,File的名字+FileName
//如此处为 'fileupload' + 'FileName' = 'fileuploadFileName'
private String fileuploadFileName; //上传来的文件的名字
public File getFileupload() {
return fileupload;
}
public void setFileupload(File fileupload) {
this.fileupload = fileupload;
}
public String getFileuploadFileName() {
return fileuploadFileName;
}
public void setFileuploadFileName(String fileuploadFileName) {
this.fileuploadFileName = fileuploadFileName;
}
public String uploadFile() throws Exception {
String extName = ""; //保存文件拓展名
String newFileName = ""; //保存新的文件名
String nowTimeStr = ""; //保存当前时间
SimpleDateFormat sDateFormat;
Random r = new Random();
String savePath = ServletActionContext.getServletContext().getRealPath(""); //获取项目根路径
savePath = savePath + "/pic/secondhand/"; /*拼串组成要上传保存文件的路径,即:D:/Program Files/apache-tomcat-6.0.20/webapps/(项目名)/pic/secondhand 这样的路径*/
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("utf-8"); //务必,防止返回文件名是乱码
//生成随机文件名:当前年月日时分秒+五位随机数(为了在实际项目中防止文件同名而进行的处理)
int rannum = (int) (r.nextDouble() * (99999 - 10000 + 1)) + 10000; //获取随机数
sDateFormat = new SimpleDateFormat("yyyyMMddHHmmss"); //时间格式化的格式
nowTimeStr = sDateFormat.format(new Date()); //当前时间
//获取拓展名
if (fileuploadFileName.lastIndexOf(".") >= 0){
extName = fileuploadFileName.substring(fileuploadFileName.lastIndexOf("."));
}
newFileName = nowTimeStr + rannum + extName; //文件重命名后的名字
fileupload.renameTo(new File(savePath + newFileName)); //保存文件
response.getWriter().print(fileuploadFileName + " 上传成功");//向页面端返回结果信息
return null; //这里不需要页面转向,所以返回空就可以了
}
}
----------------------------------------------------------------------
步骤五:配置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="commonutil" extends="struts-default" namespace="/commonutil">
<!-- 用于处理上传文件的公用ACTION,我因为项目使用了spring,所以class这样配置,否则,需要正常进行配置写完整类路径,此外,这里不需要配result节点-->
<action name="uploadUtil" class="uploadUtilAction" method="uploadFile">
</action>
</package>
</struts>
----------------------------------------------------------------------
以上就是全部代码的书写。经测试,是没问题的。
最后需要补充的一点是:当设置了'sizeLimit'属性来设置单个文件大小限制时候,在选择文件时候当超过大小时候是不提示的,还是会添加到队列中,但是,当点击 开始上传 的时候,才会进行对应提示。我觉得这也是这个插件一个不完美的地方,有兴趣的朋友可以自己写下方法去实现这一环节,让在选文件的时候就进行提示,超过大小就不允许添加进队列中吧。
好了,其他相关的说明,我在代码中关键的地方都已经注释很清楚了,大家仔细阅读注释,就可以懂怎么使用。
分享到:
相关推荐
—》最近由于项目需要使用到一个上传插件,在网上发现uploadify挺不错,所以决定使用它,但是官网文档和例子是php的,而项目是SSI框架的,所以自己对uploadify在struts2中的使用进行了一番研究,最终实现了。...
1 判断session是否失效 本实例没测试这个问题 但在工作项目中碰到了 但原因在这里记录下:web应用会存在一个session 而uploadify上传时也会产生一个新的session 导致在后台判断session是否失效时获取的session为null...
Uploadify结合Struts2上传demo
struts2 +jquey uploadify3 2 实现多文件上传 可以运行的myeclipse工程 绝对好用 访问方式http: 127 0 0 1:8080 Struts2Uploadify upload jsp uploadify 使用说明: <a href "javascript:$ "#file ...
uploadify+struts2多文件上传实例,解决了在firefox下的session问题,相信能帮助到你的
代码使用Struts2框架和uploadify插架实现多文件上传功能。
jquery中uploadify和struts2结合使用。带有工程实例。
里面有个.net文件上传的实例,利用了jQuery上传插件Uploadify ,简单易懂,可以直接用,也可以作为开发的启发
uploadify 多文件上传插件 多浏览器兼容
资源名称:jquery上传插件Uploadify3.2 中文参考手册内容简介:上传功能在我们的程序中是经常会用到的,而传统的http上传在安全性和文件大小上都会有一定的限制,而且不能看到上传进度。今天我要给大家介绍额就是一...
Uploadify + Struts2 实现文件上传详解 有需要的看看
jquery上传插件uploadify+php完美实现强大的文件上传功能实例+程序_【PHP】.rar
uploadify是一个与jquery和flash结合实现的上传程序,界面挺漂亮,用起来也方便,不过浏览器需要安装有Flash插件,好像现在这几年,浏览器对flash插件的支持感觉没前几年好了,这可能会对uploadify上传插件的正常...
使用struts2和uploadify(2.1.4)开发的文件上传插件
JSP使用文件上传插件uploadify ,内附带最新版本的uploadify。欢迎学习交流。本文章地址http://blog.csdn.net/tianba8/article/details/9953383,欢迎交流学习。
uploadify3.1与Struts2配合使用。代码运行完美无错,upload因为版本问题,开发者的方法总是运行不起来,这个与Struts2结合的可以成功运行。
struts2 + uploadify上传文件示例
JQuery 上传插件Uploadify使用2 多文件上传
struts1 uploadify 多文件上传
完整的Uploadify+Struts2使用案例,前台用jQuery的DOM技术生成隐藏的input,后台由action负责上传,上传结束后提交前台的form。再由另外一个action完成链接和其他信息的持久化工作。