Struts2 + jquey.uploadify 实现无刷新带进度条上传
2010-03-20 13:30
459 查看
首先新建一个Struts2 的项目。
创建一个Action用来处理文件上传 UploadAction.action
从Jquery 官方下载 jquery.uploadify 这个文件上传插件。解压 放到WebRoot 下
新建一个Jsp(html)页面
Struts.xml
OK ,大功告成!
创建一个Action用来处理文件上传 UploadAction.action
package com.fileUpload.Action; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; import java.util.Date; import org.apache.struts2.ServletActionContext; import com.opensymphony.xwork2.ActionSupport; public class UploadAction extends ActionSupport { /** * */ private static final long serialVersionUID = 2854105381965508552L; private static final int BUFFER_SIZE = 20 * 1024; // 20K private File myFile; // 与页面 <input type="file"> 控件的 name 保持一致 private String fileName; // private String contentType; public File getMyFile() { return myFile; } public void setMyFile(File myFile) { this.myFile = myFile; } public String getFileName() { return fileName; } // 是setMyFileFileName而不是setFileName 。 struts2的规则。MyFile 是上面private File // myFile public void setMyFileFileName(String fileName) { this.fileName = fileName; } public String getContentType() { return contentType; } // 同上 public void setMyFileContentType(String contentType) { this.contentType = contentType; } public String execute() { String newFileName = new Date().getTime() + getExtention(fileName); File imageFile = new File(ServletActionContext.getServletContext() .getRealPath("/upload") + "/" + newFileName); upload(myFile, imageFile); return SUCCESS; } private static void upload(File src, File dst) { try { InputStream in = null; OutputStream out = null; try { in = new BufferedInputStream(new FileInputStream(src), BUFFER_SIZE); out = new BufferedOutputStream(new FileOutputStream(dst), BUFFER_SIZE); byte[] buffer = new byte[BUFFER_SIZE]; while (in.read(buffer) > 0) { out.write(buffer); } } finally { if (null != in) { in.close(); } if (null != out) { out.close(); } } } catch (Exception e) { e.printStackTrace(); } } private static String getExtention(String fileName) { int pos = fileName.lastIndexOf("."); return fileName.substring(pos); } }
从Jquery 官方下载 jquery.uploadify 这个文件上传插件。解压 放到WebRoot 下
新建一个Jsp(html)页面
<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="jquery.uploadify/default.css" mce_href="jquery.uploadify/default.css" rel="stylesheet" type="text/css"/> <link href="jquery.uploadify/uploadify.css" mce_href="jquery.uploadify/uploadify.css" rel="stylesheet" type="text/css"/> <mce:script type="text/javascript" src="jquery.uploadify/jquery-1.3.2.min.js" mce_src="jquery.uploadify/jquery-1.3.2.min.js"></mce:script> <mce:script type="text/javascript" src="jquery.uploadify/swfobject.js" mce_src="jquery.uploadify/swfobject.js"></mce:script> <mce:script type="text/javascript" src="jquery.uploadify/jquery.uploadify.v2.1.0.min.js" mce_src="jquery.uploadify/jquery.uploadify.v2.1.0.min.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#uploadTest").uploadify({ 'uploader' : 'jquery.uploadify/uploadify.swf', 'script' : 'upload.action', 'cancelImg' : 'jquery.uploadify/cancel.png', 'fileDataName' : 'myFile', 'queueID' : 'fileQueue', 'auto' : false, 'multi' : true, 'button Text' : " 浏 览 ", 'simUploadLimit' : 20, 'sizeLimit' : 999999999999, 'queueSizeLimit' : 20, 'fileDesc' : '支持格式:jpg,gif,png,bmp', 'fileExt' : '*.jpg;*.gif,*.jpeg,*.png,*.bmp' }); }); // --></mce:script> </head> <body> <div id="fileQueue"></div> <input type="file" name="myFile" id="uploadTest" > <a href="javascript:$('#uploadTest').uploadifyUpload()" mce_href="javascript:$('#uploadTest').uploadifyUpload()">上传</a> <a href="javascript:$('#uploadTest').uploadifyClearQueue()" mce_href="javascript:$('#uploadTest').uploadifyClearQueue()">取消上传</a> </body> </html>
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> <constant name="struts.multipart.maxSize" value="10000000"></constant> <package name="default" namespace="/" extends="struts-default"> <action name="upload" class="com.fileUpload.Action.UploadAction"> <result name="success" type="redirect">/index.jsp</result> </action> </package> </struts>
OK ,大功告成!
相关文章推荐
- struts2 +jquey uploadify3.2 实现多文件上传,可预览、删除、排序
- struts2 +jquey uploadify3.2 实现多文件上传,可预览、删除、排序
- jquery.uploadify插件与java web的结合实现多文件上传+进度条
- Springmvc+uploadify实现文件带进度条批量上传
- Struts2 +jquery+ajaxfileupload 实现无刷新上传图片
- Struts2 +jquery+ajaxfileupload 实现无刷新上传文件
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
- Thinkphp+smarty+uploadify实现无刷新上传
- Springmvc+uploadify实现文件带进度条批量上传
- Thinkphp+smarty+uploadify实现无刷新上传
- jquery uploadify 实现批量上传,带进度显示,判断文件大小
- jquery uploadify隐藏上传进度的实现方法
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
- Struts2实现文件上传并显示实时进度
- jquery.uploadify插件实现图片上传和预览效果
- Springmvc+uploadify实现文件上传
- 利用jsp+uploadify插件实现附件上传到ftp服务器的功能
- ocupload、struts2实现excel文件上传,poi解析
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
- JQuery Uploadify 基于JSP的无刷新上传实例