plupload插件结合struts上传文件
最近需要处理点上传文件方面的东西，需求就是点击一个上传按钮之后出现一个弹出框样式的上传插件，于是在网上搜索了一些上传的插件，最后决定使用plupload
我采用的struts框架，搜索了一下网上的例子，大多都没有，于是重新看了下插件提供的接口，简单改写了一下
首先是在网上下载一个plupload的插件，然后再你的项目中引用进来
jump.js
jQuery(document).ready(function($) {
//点击上传文件时的页面跳转，跳转到相应的弹出层网页资源
$(".cl_updown_button").click(function() {
Uploader(pageTip,function(files){
if(files && files.length>0){
parent.location="javascript:location.reload()";
}
});
});
});
function Uploader(pageTip,callBack){
var addWin = $('<div style="overflow: hidden;"/>');
var upladoer = $('<iframe/>');
upladoer.attr({'src':'upload.jsp',width:'100%',height:'100%',frameborder:'0',scrolling:'no'});
addWin.window({
title:"上传文件",
height:350,
width:600,
minimizable:false,
modal:true,
collapsible:false,
maximizable:false,
resizable:false,
content:upladoer,
onClose:function(){
var fw = GetFrameWindow(upladoer[0]);
var files = fw.files;
$(this).window('destroy');
callBack.call(this,files);
},
onOpen:function(){
var target = $(this);
setTimeout(function(){
var fw = GetFrameWindow(upladoer[0]);
fw.target = target;
},100);
}
});
}
function GetFrameWindow(frame){
return frame && typeof(frame)=='object' && frame.tagName == 'IFRAME' && frame.contentWindow;
}
upload.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="/web/plupload/queue/css/jquery.plupload.queue.css" type="text/css"></link>
<script type="text/javascript" src="/web/plupload/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="/web/plupload/plupload.js"></script>
<script type="text/javascript" src="/web/plupload/plupload.html4.js"></script>
<script type="text/javascript" src="/web/plupload/plupload.html5.js"></script>
<script type="text/javascript" src="/web/plupload/plupload.flash.js"></script>
<script type="text/javascript" src="/web/plupload/zh_CN.js"></script>
<script type="text/javascript" src="/web/plupload/queue/jquery.plupload.queue.js"></script>
</head>
<body style="padding: 0;margin: 0;">
<%
String url = "";
String types = "";
String size = "";
url = '/web/test/fileupload/uploader.action';
types = "text,txt,dat";
size = "5MB";
%>
<div id="uploader"></div>
<script type="text/javascript">
var files = [];
var errors = [];
var type = 'file'; //type='file'
var max_file_size = '<%=size %>';
var filters = {title : "文档", extensions : "<%=types %>"};
var url = <%=url %>;
$("#uploader").pluploadQueue($.extend({
runtimes : 'flash,html4,html5',
url : url,
max_file_size : max_file_size,
file_data_name:'file', //name='file'
unique_names:true,
filters : [filters],
flash_swf_url : '/web/plupload/plupload.flash.swf',
init:{
FileUploaded:function(uploader,file,response){
files.push(file.name);
files.push(file.size);
if(response.response){
var rs = $.parseJSON(response.response);
if(rs.status){
files.push(file.name);
}else{
errors.push(file.name);
}
}
},
UploadComplete:function(uploader,fs){
var e= errors.length ? ",失败"+errors.length+"个("+errors.join("、")+")。" : "。";
alert("上传完成！共"+fs.length+"个。"+e);
target.window("close");
}
}
}));
</script>
</body>
</html>
我在这里使用绝对路径，是因为在我新建的项目中使用相对路径时一直找不到对应的js，具体原因尚不清楚
配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<!-- 限定上传文件最大大小5M,struts2默认maxSize为2M -->
<constant name="struts.multipart.maxSize" value="5242880"></constant>
<!-- 指定上传文件时临时文件的存放路径,设为"/temp"将在 项目所在盘下创建文件夹temp-->
<constant name="struts.multipart.saveDir" value="/temp"></constant>
<!-- 文件控制器配置 -->
<package name="fileAction" namespace="/test/fileupload" extends="struts-default">
<!-- 文件上传控制器 -->
<action name="upload" class="com.test.fileupload.FileUploadAction">
<!-- 配置fileUpload拦截器 -->
<interceptor-ref name="fileUpload">
<!-- 配置允许上传的文件类型-->
<param name="allowedTypes">
application/octet-stream,text/plain
</param>
<!-- 配置允许上传的文件大小 -->
<param name="maximumSize">5242880</param>
</interceptor-ref>
<interceptor-ref name="defaultStack"></interceptor-ref>
<!-- 配置上传文件的保存的相对路径 -->
<!-- <param name="savePath">/WEB-INF/temp/upload/file</param> -->
<!-- 配置逻辑视图和实际资源的对应关系 -->
<result name="gps">/WEB-INF/main/main-index.jsp</result>
</action>
</package>
</struts>
FileUploadAction.java
package com.test.fileupload;
import com.opensymphony.xwork2.ActionSupport;
/**
*
* @author
*/
public class FileUploadAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private File file; //文件
private String fileContentType; //文件类型
private String fileFileName; //文件名
public File getFile() {
return file;
}
public void setFile(File file) {
this.file = file;
}
public String getFileContentType() {
return fileContentType;
}
public void setFileContentType(String fileContentType) {
this.fileContentType = fileContentType;
}
public String getFileFileName() {
return fileFileName;
}
public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}
public String execute() throws Exception {
try {
File file = new File("F:\\test\\upload");
if(!file.exists()) {
file.mkdirs();
}
//文件拷贝
FileUtils.copyFile(this.file, new File(file, this.fileFileName));
} catch(Exception e) {
e.printStackTrace();
}
return SUCCESS;
}
}
以上代码全是我在项目中扣出来的，因为项目比较大，所以不能保证抠出来的代码可以正常运行，但是基本原理已经给出
只要网上搜索出struts2上传文件，就可以正常配置了
效果图如下
