plupload+struts2实现文件上传下载「建议收藏」

plupload+struts2实现文件上传下载

大家好,又见面了,我是全栈君。

    plupload是一款优秀的web前端上传框架。使用简单。功能强大。不仅支持文件多上传,进度条。拖拽方式选择文件更重要的是他会自己主动的识别浏览器来选择最合适的上传方式。废话少说先上图:plupload+struts2实现文件上传下载「建议收藏」

代码都是測试过的非常好用,仅仅要把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>
    <!– 上传文件最大限制是100M –>
    <constant name=”struts.multipart.maxSize” value=”209715200″ />
    <constant name=”struts.action.extension” value=”action” /><!– struts2的默认路径后缀名是.action –>
    <package name=”default” namespace=”/” extends=”struts-default”>
    
         <!– 文件action –>
         <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>
             <!– 配置同意上传文件的大小(单位字节) 2M–>
           </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><!– 把struts2的默认拦截器写在result的后边 –>
         </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;
}
  //为client提供输入流
    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;
   }
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116295.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • ftp扫描软件下载_ftp好还是webdav好

    ftp扫描软件下载_ftp好还是webdav好你对于ftp扫描工具有哪些了解呢?以前小编没有使用过这个软件,不知道是干什么的,但是到后来当我用过这个软件之后就觉得特别棒。ftp扫描工具俗称就是上传下载,只要看过这个俗称我相信应该都会知道这个软件是干什么的了。接下来就告诉你们有哪些好用的ftp扫描工具。第一款:IIS7服务器管理工具这款工具里面的ftp扫描工具算是同行里面的翘楚了其实,挺好用的。不仅拥有批量管理站点的功能,还能定时同步(上传和下载)、多任务同时进行、定时备份还能够自动更新。这些功能是很方便的了。当然,IIS7其他的功能也是很好用的哦

  • mybatis插件运行原理_maven 插件

    mybatis插件运行原理_maven 插件最近在做新项目,基于若依(前后端分离版本)做的,他也使用了常用的分页插件PageHelper。老规矩,今天文章还是分三步走,先上文章导读,然后讲原理,最后讲解源码案例。最后达到的效果就是希望读者朋友们在看完我写的这篇文章后,能够秒懂别人写的MyBatis插件并且能够开发出自己的MyBatis的插件。文章导读MyBatis插件原理与实战什么是插件?插件就是在具体的执行流程插一脚(触发点、拦截器)来实现具体的功能。一般插件会对执行流程中的上下文有依赖,抽象的说,我们也可以把MyBatis看作是J

  • Linux安装PS_linux 安装命令

    Linux安装PS_linux 安装命令导读pstack命令可显示每个进程的栈跟踪。pstack命令必须由相应进程的属主或root运行。可以使用pstack来确定进程挂起的位置。此命令允许使用的唯一选项是要检查的进程的PID。实例pstree以树结构显示进程pstree-pwork|grepadsshd(22669)—bash(22670)—ad_preprocess(4551)-+-{ad_preproc…

  • 机器学习是什么?

    机器学习是什么?WhatisMachineLearning?机器学习现在是一大热门,研究的人特多,越来越多的新人涌进来。不少人其实并没有真正想过,这是不是自己喜欢搞的东西,只不过看见别人都在搞,觉着跟大伙儿

  • 微通道产品经理Grover采访:美国的微通道设计

    微通道产品经理Grover采访:美国的微通道设计

  • 测试中常用的adb shell命令

    测试中常用的adb shell命令

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号