plupload插件结合struts上传文件

最新推荐文章于 2021-02-28 02:58:43 发布

萌萌的卡洛奇

最新推荐文章于 2021-02-28 02:58:43 发布

阅读量171

点赞数

文章标签： java javascript ViewUI

最近需要处理点上传文件方面的东西，需求就是点击一个上传按钮之后出现一个弹出框样式的上传插件，于是在网上搜索了一些上传的插件，最后决定使用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上传文件，就可以正常配置了

效果图如下

萌萌的卡洛奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
plupload插件结合struts上传文件

最近需要处理点上传文件方面的东西，需求就是点击一个上传按钮之后出现一个弹出框样式的上传插件，于是在网上搜索了一些上传的插件，最后决定使用plupload我采用的struts框架，搜索了一下网上的例子，大多都没有，于是重新看了下插件提供的接口，简单改写了一下首先是在网上下载一个plupload的插件，然后再你的项目中引用进来jump.jsjQuery(document).ready(...
复制链接

扫一扫