plupload+struts2实现文件上传下载

时间：2015-07-08 13:03:30 阅读：191 评论：0 收藏：0 [点我收藏+]

标签：

plupload是一款优秀的web前端上传框架，使用简单，功能强大，不仅支持文件多上传，进度条，拖拽方式选择文件更重要的是他会自动的识别浏览器来选择最合适的上传方式，废话少说先上图：技术分享

代码都是测试过的很好用，只要把jquery路径和版本修改以下，去plupload官网把jar把下载下来就可以用了。

先看一下uploadUI.jsp源代码，uploadUI.jsp就是上图显示的页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Plupload上传页面</title>
<script type="text/javascript" src="jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="plupload/jquery.ui.plupload/jquery.ui.plupload.js"></script>
<script type="text/javascript" src="js/pop.js"></script>
<style type="text/css">
html{
width:100%;
height:100%;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
-o-text-size-adjust:none;
text-size-adjust:none;
}
/**
*进度条样式
*/
#processbar {
height:20px;
width: 60%;
margin-top:15px;
margin-left:65px;
background-color:#C7D6E4;
border: 0px solid #999;
border-radius:15px;
}
.finish {
height: 20px;
width:60%;
background-color:#5CB85C;
border-radius:15px;
}
td{
width:200px;
height:16px;
text-align: center;
}
</style>
</head>
<body style="font:13px Verdana; background:#eee;color:#333;width:99%">
<br/>
<div id="container" style="margin-left:-9px;width:100%;height:600px;background-color:#EBEBEB;border:1px solid #EBEBEB;">
<div id="pickfiles" style="background-color:#abcdef;width:100%;height:45px;margin-top:-24px;">
<span style="font-size:25px;font-family:fantasy;font-weight:bold">文件上传</span>
　　　　　　　　<span style="font-size:15px;font-family:fantasy;text-align:bottom">点击选择文件或拖拽文件至下方空白区</span>
</div>
<div id="drag" style="width:100%;height:300px;background-color:#ffffff;border:1px solid #EBEBEB;overflow-y:auto;">
<table id="filesTable" style="font-size:14px;margin:0 auto;width:100%;cellpadding=0;cellspacing=0;word-break:break-all; border-collapse: collapse;">
<tr>
<th>文件名称</th><th>文件大小</th><th>进度</th><th>删除</th>
</tr>
</table>
</div>
<div>
<button id="uploadfiles">开始上传</button>
<button id="stopUploadfiles" >停止上传</button>
<input type="hidden" id="filename" name="filename">
<input type="hidden" id="filesize" name="filesize">
</div>
</div>
<br/>
<pre id="console"></pre>
<script type="text/javascript">
var newFlagFlag=true;
window.onload = function () {
var uploader = new plupload.Uploader({
runtimes : ‘html5,flash,silverlight,html4‘,//plupload会在文件上传时根据浏览器的不停选择合适的上传方式
browse_button : ‘pickfiles‘,//选择文件的按钮
container:‘container‘,//文件上传容器
url:‘file_upload.action‘,//上传文件路径
flash_swf_url:‘plupload/Moxie.swf‘,// Flash环境路径设置
silverlight_xap_url:‘plupload/Moxie.xap‘,//silverlight环境路径设置
unique_names :true,//生成唯一文件名
resize: { //可以使用该参数对将要上传的图片进行压缩
width: 100, //指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度
height: 100,//指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度
crop: true,//是否裁剪图片
quality: 60,//压缩后图片的质量，只对jpg格式的图片有效，默认为90
preserve_headers: false //压缩后是否保留图片的元数据，true为保留
},
multipart:true,//为true时将以multipart/form-data的形式来上传文件，为false时则以二进制的格式来上传文件
multi_selection:true,//是否可以在文件浏览对话框中选择多个文件，true为可以，false为不可以。默认true
file_data_name:‘file‘, //name=‘file‘
max_retries:5,//当发生plupload.HTTP_ERROR错误时的重试次数，为0时表示不重试
drop_element:‘drag‘,
filters : [{
title : ‘所有‘, //文件上产过滤器，我这里是所有文件都可以上传
extensions : ‘*‘
}],
init: {//当Plupload初始化完成后触发监听函数参数：(uploader plupload的实例对象)
PostInit: function() {
document.getElementById(‘uploadfiles‘).onclick = function() {//开始上传方法
uploader.start();
return false;
};
document.getElementById(‘stopUploadfiles‘).onclick = function() {//停止上传方法
uploader.stop();
return false;
};
},
FilesAdded: function(up, files){//当文件添加到上传队列后触发
plupload.each(files, function(file){
$("#filesTable").append("<tr><td class=" + file.id + ">" + file.name + "</td><td>"+plupload.formatSize(file.size)+"</td>"+
"<td id=" +file.id +"><div id=‘processbar‘><div class=‘finish‘ id=‘div_contianer"+file.id+"‘ style=‘visibility:hidden;‘></div></div></td>"+
"<td><input type=‘button‘ id=" +file.id +" value=‘删除‘></input></td>"+
"</tr>");
});
},
OptionChanged:function(up,option_name,new_value,old_value){//当使用Plupload实例的setOption()方法改变当前配置参数后触发

},
UploadProgress: function(up, file){ //上传过程中触发可以用此事件来显示上传进度
//在这写添加进度条
$("#div_contianer"+file.id).css("width",file.percent+"%");
$("#div_contianer"+file.id).text(file.percent+"%");
},
BeforeUpload:function(up, file){ //当队列中的某一个文件正要开始上传前触发
document.getElementById("div_contianer"+file.id).style.visibility=‘visible‘;
},
UploadFile:function(up, file){ //当上传队列中某一个文件开始上传后触发
$("#filename").val(file.name);
$("#filesize").val(file.size);
},
StateChanged:function(up){ //当上传队列的状态发生改变时触发

},
QueueChanged:function(up){ //当上传队列发生变化后触发，即上传队列新增了文件或移除了文件。QueueChanged事件会比FilesAdded或FilesRemoved事件先触发

},
FilesRemoved:function(up, files){ //当文件从上传队列移除后触发

return false;
},
ChunkUploaded:function(up,file,responseObject){ //当使用文件小片上传功能时，每一个小片上传完成后触发

},
UploadComplete:function(up,files){ //当上传队列中所有文件都上传完成后触发 files为一个数组，里面的元素为本次已完成上传的所有文件对象
alert(files[0].name);
},
Error: function(up, err) {
document.getElementById(‘console‘).innerHTML += "\nError #" + err.code + ": " + err.message;
}
}
});
uploader.init();
};
</script>
<a href="file_downloadFile.action?filepath=D:\uploadFiles\gaode.txt">点击下载文件</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.enable.DynamicMethodInvocation" value="true" />
<constant name="struts.devMode" value="false" />

<constant name="struts.custom.i18n.resources" value="file"></constant>

<constant name="struts.multipart.maxSize" value="209715200" />
<constant name="struts.action.extension" value="action" />
<package name="default" namespace="/" extends="struts-default">


<action name="file_*" class="com.uploadanddownload.action.FileAction" method="{1}">
<interceptor-ref name="fileUpload">

<param name="allowedTypes">
image/jpeg,image/gif,image/png,image/bmp,
text/css,application/msword,application/octet-stream,text/html,
application/x-javascript,text/plain,application/zip,application/x-zip-compressed,
video/x-msvideo,application/msword,
audio/mpeg,application/pdf,application/vnd.ms-powerpoint,application/excel,
application/vnd.ms-excel,text/xml,application/xlsx,application/vnd.ms-excel.sheet.macroEnabled.12,
application/java-archive,
application/vnd.ms-excel,application/xlsx,application/vnd.ms-excel.sheet.macroEnabled.12,
application/java-archive,application/x-cdf,application/x-netcdf,application/x-cpio,application/x-csh,
application/x-dvi,message/rfc822,text/x-setext,application/x-gtar,application/x-hdf,
image/ief,application/x-latex,video/mpeg,application/x-troff-man,application/x-troff-me,message/rfc822,
message/rfc822,application/x-mif,video/quicktime,video/x-sgi-movie,video/mpeg,application/x-troff-ms,
application/x-netcdf,message/rfc822,application/oda,application/x-pkcs12,application/pkcs7-mime,image/x-portable-bitmap,
application/x-pkcs12,image/x-portable-graymap,image/x-portable-anymap,application/vnd.ms-powerpoint,
image/x-portable-pixmap,text/x-python,application/x-python-code,audio/x-pn-realaudio,application/x-pn-realaudio,image/x-cmu-raster,
image/x-rgb,text/richtext,text/x-sgml,application/x-sh,application/x-shar,application/x-wais-source,application/x-sv4cpio,application/x-sv4crc,
application/x-shockwave-flash,application/x-troff,application/x-tar,application/x-tcl,application/x-tex,application/x-texinfo,image/tiff,application/x-troff,
text/tab-separated-values,application/x-ustar,text/x-vcard,audio/x-wav,image/x-xbitmap,application/xml,image/x-xpixmap,image/x-xwindowdump,
application/kset,application/ksdps,application/kswps,
application/vnd.openxmlformats-officedocument.wordprocessingml.document,
application/vnd.openxmlformats-officedocument.presentationml.presentation,
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
</param>

</interceptor-ref>


<result type="stream"> 
<param name="contentType">application/octet-stream;charset=ISO8859-1 </param>
<param name="inputName">inStream</param>
<param name="contentDisposition">attachment;filename="${filename}"</param>
</result>
<interceptor-ref name="defaultStack"></interceptor-ref>
</action>
</package>
</struts>

最后是FileAction中的代码，这个action包含了上传和下载方法，支持不同浏览器下载文件名乱码等问题：

package com.uploadanddownload.action;

import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;
import javax.servlet.ServletContext;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import Decoder.BASE64Encoder;
import com.opensymphony.xwork2.ActionSupport;
/**
* 文件action
* @author LEZ
*2015年5月12日
*/
public class FileAction extends ActionSupport{
//序列化id 实现序列化接口时定义的序列化id，反序列化的时候可以根据这个id重新生成对象
private static final long serialVersionUID = -8036172233915538118L;
private File file; //上传时从页面传过来的文件
private String fileContentType; //文件类型
private String fileFileName; //文件名
private String filename; //下载所用文件名
private ServletContext context; //上下文环境
private String mimeType; //下载的类型转换
private InputStream inStream; //输入流下载必须用
private String filesize;
private int fileId;
private String filepath;//文件路径
public String getFilepath() {
return filepath;
}
public void setFilepath(String filepath) {
this.filepath =filepath;
}
private String inputCon;//具体输入的条件
public int getFileId() {
return fileId;
}
public void setFileId(int fileId) {
this.fileId = fileId;
}
public String getFilesize() {
return filesize;
}
public String getInputCon() {
return inputCon;
}
public void setInputCon(String inputCon) {
this.inputCon = inputCon;
}
public void setFilesize(String filesize) {
this.filesize = filesize;
}
/**
* 下载方法
* author:lez
* 2015年5月19日下午1:33:21
*/
public String downloadFile(){
return SUCCESS;
}

public File getFile(){
return file;
}
public String getFileContentType(){
return fileContentType;
}
public String getFileFileName() {
return fileFileName;
}
//为客户端提供输入流
public InputStream getInStream(){
try {
File file = new File(filepath);
inStream = new FileInputStream(file);
if (inStream == null) {
inStream = new ByteArrayInputStream("Sorry,File not found !".getBytes());
}
} catch (Exception e) {
e.printStackTrace();
}
return inStream;
}
//根据不同的文件动态给出MIME文件类型
public String getContentType(){
//在Tomcat Conf里的web.xml有对应的映射文件
return ServletActionContext.getServletContext().getMimeType(filename);
}
//返回一个文件名
public String getFilename() throws IOException{
String agent=ServletActionContext.getRequest().getHeader("user-agent");//根据http头信息获取对应的浏览器类型
return encodeDownloadFilename(filename,agent);
}
//下载附件名乱码问题， IE和火狐解决不同 IE默认是Url编码火狐默认是base64编码
public String encodeDownloadFilename(String filename, String agent)
throws IOException {
if (agent.contains("Firefox")) { // 火狐浏览器
filename = "=?UTF-8?B?"
+ new BASE64Encoder().encode(filename.getBytes("utf-8"))
+ "?=";
} else { // IE及其他浏览器
filename = URLEncoder.encode(filename, "utf-8");
}
return filename;
}
public String getMimeType() {
return mimeType;
}
public void setFile(File file){
this.file = file;
}
public void setFileContentType(String fileContentType){
this.fileContentType = fileContentType;
}
public void setFileFileName(String fileFileName) {
try {
this.fileFileName =fileFileName;
} catch (Exception e) {
e.printStackTrace();
}
}
public void setFilename(String filename) {
this.filename = filename;
}
public void setServletContext(ServletContext context) {
this.context = context;
}
/**
* 上传文件方法
* @return
*/
public String upload(){
System.out.println("进入上传");
try{
File file = new File("D:/uploadFiles");
if(!file.exists()){
file.mkdirs();
}
//文件拷贝
FileUtils.copyFile(this.file,new File(file,this.fileFileName));
}catch(Exception e){
e.printStackTrace();
}
return null;
}
}

plupload+struts2实现文件上传下载

标签：

原文地址：http://blog.csdn.net/u014754818/article/details/46800709

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行