前两天在看JavaEye时候看到了Uploadfy,因为之前没接触过,就研究了一下,从官方网址上下载了对应的包.
jquery.uploadify-v2.1.0.zip
Uploadify插件下载地址: http://www.uploadify.com/download
为了引起你的阅读兴趣,先看下运行的效果如图
下面我们就来对Struts2如何运用Uploadfy上传做些讲解.
首先去上面的网站下载jquery.uploadify-v2.1.0.zip这个包
关于struts2的在这里就不用说了.
如何新建个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 '1.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 rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> <link href="css/default.css" mce_href="css/default.css" rel="stylesheet" type="text/css" /> <link href="css/uploadify.css" mce_href="css/uploadify.css" rel="stylesheet" type="text/css" /> <!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--> <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script> <mce:script type="text/javascript" src="js/swfobject.js" mce_src="js/swfobject.js"></mce:script> <mce:script type="text/javascript" src="js/jquery.uploadify.v2.1.0.min.js" mce_src="js/jquery.uploadify.v2.1.0.min.js"></mce:script> <mce:script type="text/javascript"><!-- function showResult(){//删除显示的上传成功结果 $("#result").html(""); } $(document).ready(function() { $('#fileInput').uploadify({ 'uploader': 'js/uploadify.swf', 'script': 'uploadifyAction!uploadFile.action', 'folder': 'uploads', 'cancelImg': 'js/cancel.png', 'fileDataName': 'fileInput', //和input的name属性值保持一致就好,Struts2就能处理了 'queueID': 'fileQueue', 'auto': false,//是否选取文件后自动上传 'multi': true,//是否支持多文件上传 'simUploadLimit' : 2,//每次最大上传文件数 'buttonText': 'BROWSE',//按钮上的文字 'displayData': 'percentage',//有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);//两秒后删除显示的上传成功结果 } }); }); // --></mce:script> </head> <body> <div id="fileQueue"></div> <input type="file" name="fileInput" id="fileInput" /> <a href="javascript:$('#fileInput').uploadifyUpload();" mce_href="javascript:$('#fileInput').uploadifyUpload();">上传文件</a> <a href="javascript:$('#fileInput').uploadifyClearQueue();" mce_href="javascript:$('#fileInput').uploadifyClearQueue();">取消上传队列</a> <div id="result"></div><!--显示结果--> </body> </html>
如何写个Action
package com.test.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; public class UploadifyAction extends ActionSupport { private File fileInput; private String fileInputFileName; @SuppressWarnings("deprecation") public String uploadFile() throws Exception { System.out.println("进入uploadFile"); 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(fileInputFileName.lastIndexOf(".")>=0){ extName = fileInputFileName.substring(fileInputFileName.lastIndexOf(".")); } newFileName = nowTime+extName; System.out.println(newFileName); fileInput.renameTo(new File(savePath+newFileName)); response.getWriter().print(fileInputFileName+"上传成功"); return null; //这里不需要页面转向,所以返回空就可以了 } 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; } }
接着是在struts.xml里面对action进行配置
<action name="uploadifyAction" class="com.test.action.UploadifyAction" method="uploadFile"> </action>
到此就结束了.
若需要程序的, 去这里下载
http://dl.dbank.com/c076dgcse3
欢迎访问我的其他博客
JavaEye http://cuiran.javaeye.com