最近需要处理点上传文件方面的东西,需求就是点击一个上传按钮之后出现一个弹出框样式的上传插件,于是在网上搜索了一些上传的插件,最后决定使用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上传文件,就可以正常配置了
效果图如下
分享到:
相关推荐
将Plupload与Struts2和JSP结合使用,可以构建出高效、用户体验良好的文件上传功能。 在"plupload struts2 jsp上传"这个主题中,我们需要关注以下关键知识点: 1. **Plupload组件**:Plupload提供了一个跨浏览器的...
10. **元数据支持**:除了文件内容,Plupload 还允许上传文件的元数据,如文件名、大小、类型等,方便服务器端处理。 11. **错误处理**:针对各种可能出现的问题,如文件过大、网络中断、权限问题等,Plupload 提供...
在Struts2的Action中,我们需要创建一个接收文件的POJO(Plain Old Java Object),该对象的属性应与上传文件的字段名相对应。Struts2会自动将上传的文件绑定到这些属性上。接下来,Action需要处理文件,如保存到...
4. **安全考虑**:确保限制上传文件的大小和类型,避免DoS攻击和恶意文件上传。在Struts2拦截器或Action中实现这些限制。 5. **反馈结果**:当文件上传成功或失败时,Struts2 Action应返回一个结果,这个结果将被...
"带进度条的多文件上传Struts"是一个特定的技术实现,它结合了Struts框架和plupload插件,为用户提供了一种可视化、交互性强的文件上传体验。下面将详细讲解这个主题涉及的知识点。 首先,**Struts** 是一个基于MVC...
综上所述,结合Struts2和plupload,我们可以实现一个高效、用户友好的多文件上传功能。通过前端与后端的紧密配合,不仅可以提升用户体验,还能确保文件上传过程的稳定性和安全性。在实际开发中,还可以根据具体需求...
SwfUpload 是一个开源的JavaScript库,用于在Web应用程序中实现文件上传功能,它与Java后端技术如Struts2框架结合使用,可以提供高级的文件上传体验。在这个项目中,SwfUpload 被用来展示文件上传的进度、速度以及...
Uploadify是一款基于jQuery的文件上传插件,它提供了异步上传功能,让用户可以在不刷新页面的情况下上传文件。Uploadify支持多文件选择、进度条显示、文件类型限制和自定义上传按钮等功能。其工作原理是利用HTML5的...
在这个“Struts2+上传进度条完美运行”的主题中,我们将深入探讨如何在Struts2框架下实现文件上传功能,并结合进度条展示上传进度,提供用户友好的交互体验。 1. **Struts2文件上传**: Struts2通过`struts2-core`...
在Java开发中,大文件...总之,Java大文件异步上传结合Struts2、HTML5和JavaScript技术,可以实现高效、用户友好的文件上传功能。通过合理的配置和编程,可以满足不同的业务需求,同时确保上传过程的安全性和稳定性。
4. **异步上传**:结合Ajax技术,可以实现后台异步上传,用户在选择文件后,文件会在后台上传,用户无需等待,可以继续编辑其他内容。 5. **使用Struts2的FileUpload拦截器**:优化Struts2的配置,使得文件上传请求...