plupload+struts2实现文件上传下载
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 transitional//EN">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/jquery-ui-1.11.4/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/plupload-2.1.8/js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />
<!-- production -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload-2.1.8/js/plupload.full.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload-2.1.8/js/jquery.ui.plupload/jquery.ui.plupload.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload-2.1.8/js/i18n/zh_CN.js"></script> <title>TEST</title>
</head>
<body>
<div class="container">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>
<h1 class="text-center">申请表信息填写</small></h1>
<br>
<form id="form" action="upload_FileAction" method="POST" enctype="multipart/form-data" > <div id="uploader">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
</div>
<br /> <ul id="file-list"> </ul>
<input type="button" class="btn btn-lg btn-primary" id="submitBtn" onclick="submitForm()" value="提交"/>
<button onclick="javascript:window.history.back()" class="btn btn-lg btn-primary" type="button">返回</button>
<Br><br>
</form>
</div>
</body>
</html>
upload.jsp页面
JS文件
// Convert divs to queue widgets when the DOM is ready
$(function() {
$("#uploader").plupload({
// General settings
runtimes : 'html5,flash,silverlight,html4',
// url : "FileUpload.action",
url : "./uploadImg.action?Id="+$("#Id").val(),
// Maximum file size
max_file_size : '500kb',
// User can upload no more then 10 files in one go (sets multiple_queues to false)
chunk_size: '1mb',
max_file_count: 10,
// Resize images on clientside if we can
resize : {
width : 320,
height : 240,
quality : 90,
crop: true // crop to exact dimensions
}, // Specify what files to browse for
filters : {
prevent_duplicates : true, //不允许选取重复文件
// Specify what files to browse for
mime_types: [
{title : "Image files", extensions : "jpeg,jpg,gif,png"}
]
}, // Rename files by clicking on their titles
rename: true, // Sort files
sortable: true, // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true, // Views to activate
views: {
list: true,
thumbs: true, // Show thumbs
active: 'thumbs'
}, // Flash settings
flash_swf_url : '${pageContext.request.contextPath}/js/plupload-2.1.8/js/Moxie.swf', // Silverlight settings
silverlight_xap_url : '${pageContext.request.contextPath}/js/plupload-2.1.8/js/Moxie.xap',
// PreInit events, bound before any internal events
preinit : {
Init: function(up, info) {
//log('[Init]', 'Info:', info, 'Features:', up.features);
//// document.getElementById('uploadfiles').onclick = function() {
// $("#uploader").plupload.start();
// return false;
// };
$('#uploader_start').hide();
},
UploadFile: function(up, file) {
// log('[UploadFile]', file);
up.setOption('url', './uploadImg.action?Id='+$('#Id').val());
// You can override settings before the file is uploaded
// up.setOption('url', 'upload.php?id=' + file.id);
// up.setOption('multipart_params', {param1 : 'value1', param2 : 'value2'});
}
},
// Post init events, bound after the internal events
init : {
BeforeUpload: function(up, file) {
// Called right before the upload for a given file starts, can be used to cancel it if required
//log('[BeforeUpload]', 'File: ', file);
},
FilesAdded: function(up, files) {
// Called when files are added to queue
//log('[FilesAdded]');
//plupload.each(files, function(file) {
/// log(' File:', file);
//// });
for(var i = 0, len = files.length; i<len; i++){
var file_name = files[i].name; //文件名
//构造html来更新UI
var html = '<li id="file-' + files[i].id +'"><p class="file-name">' + file_name + '</p><p class="progress"></p></li>';
$(html).appendTo('#file-list');
!function(i){
previewImage(files[i],function(imgsrc){
$('#file-'+files[i].id).append('<img src="'+ imgsrc +'" />');
});
}(i);
}
},
FilesRemoved: function(up, files) {
// Called when files are removed from queue
plupload.each(files, function(file) {
$('#file-'+file.id).remove(); });
},
FileUploaded: function(up, file, info) {
// Called when file has finished uploading
},
UploadComplete: function(up, files) {
// Called when all files are either uploaded or failed
//alert("上传完成！共"+files.length+"个。成功"+files.length);
}
}
});
});
// Handle the case when form was submitted before uploading has finished
function submitForm() {
var form = document.forms[0];
if(validate(form)){//
// Files in queue upload them first
if ($('#uploader').plupload('getFiles').length > 0) { // When all files are uploaded submit form
$('#uploader').on('complete', function(up,files) {
//$('#form')[0].submit();
$("form:eq(0)").submit();
}); $('#uploader').plupload('start');
} else {
alert("请至少选择一张图片上传。");
}
}
return false; // Keep the form from submitting }
//plupload中为我们提供了mOxie对象
//有关mOxie的介绍和说明请看：https://github.com/moxiecode/moxie/wiki/API
//如果你不想了解那么多的话，那就照抄本示例的代码来得到预览的图片吧
function previewImage(file,callback){//file为plupload事件监听函数参数中的file对象,callback为预览图片准备完成的回调函数
if(!file || !/image\//.test(file.type)) return; //确保文件是图片
if(file.type=='image/gif'){//gif使用FileReader进行预览,因为mOxie.Image只支持jpg和png
var fr = new mOxie.FileReader();
fr.onload = function(){
callback(fr.result);
fr.destroy();
fr = null;
};
fr.readAsDataURL(file.getSource());
}else{
var preloader = new mOxie.Image();
preloader.onload = function() {
preloader.downsize( 300, 300 );//先压缩一下要预览的图片,宽300，高300
var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
callback && callback(imgsrc); //callback传入的参数为预览图片的url
preloader.destroy();
preloader = null;
};
preloader.load( file.getSource() );
}
}
struts.xml
<action name="upload_*" class="cn.cttic.action.FileAction" method="{1}">
<interceptor-ref name="fileUpload">
<param name="allowedTypes">
<!-- image/bmp,image/png,image/gif,image/jpeg,image/jpg,image/x-png, image/pjpeg ,application/octet-stream -->
</param>
<param name="maximumSize">5242880</param><!-- 5242880 -->
</interceptor-ref>
<!-- 默认的拦截器，必须要写 -->
<interceptor-ref name="defaultStack" />
<result name="ok">/test/upload.jsp</result>
</action>
Java代码
private File file;
private String name;
private List<String> names;
private String fileFileName;
//文件类型
private String fileContentType;
//大文件上传 分块chul
private int chunk;
private int chunks;
private String Id; public String uploadImg() throws IOException {
String path = FileConfiguration.IMAGES_TEMP_PATH;//d:/var/images/temp/
Date now = new Date();
path = path+ Id + "/";
File dir = new File(path);
if (!dir.exists()) {
dir.mkdirs();
}
// 把图片写入到上面设置的路径里，并设置图片URL路径
String targetFileName = path + Id + "-" + now.getTime()
+ getExtention(fileFileName);
imageFileName.add(targetFileName);
File target = new File(targetFileName);
FileCopyUtils.copy(file, target);
return SUCCESS;
}
plupload是一款优秀的web前端上传框架，使用简单，功能强大，不仅支持文件多上传，进度条，拖拽方式选择文件更重要的是他会自动的识别浏览器来选择最合适的上传方式，
http://www.cnblogs.com/2050/p/3913184.html#plupload_doc4
http://blog.csdn.net/u014754818/article/details/46800709
http://www.cnblogs.com/God-Shell/articles/3209708.html
测试demo：
http://jsfiddle.net/noo4je7w/
官网API：
http://www.plupload.com/docs/API
plupload+struts2实现文件上传下载的更多相关文章
- Struts2实现文件上传下载功能（批量上传）
今天来发布一个使用Struts2上传下载的项目, struts2为文件上传下载提供了好的实现机制, 首先,可以先看一下我的项目截图 关于需要使用的jar包,需要用到commons-fileupload ...
- Struts2之文件上传下载
本篇文章主要介绍如何利用struts2进行文件的上传及下载,同时给出我在编写同时所遇到的一些问题的解决方案. 文件上传 前端页面 <!-- 引入struts标签 --> <%@tag ...
- Struts2 文件上传,下载,删除
本文介绍了: 1.基于表单的文件上传 2.Struts 2 的文件下载 3.Struts2.文件上传 4.使用FileInputStream FileOutputStream文件流来上传 5.使用Fi ...
- Struts2中文件上传下载实例
1.单文件上传 jsp页面: <!-- 单文件上传 --> <form action="Fileupload.action" method="post& ...
- Struts2 控制文件上传下载
之前介绍servlet3.0新特性的时候有提到过servlet API提供了一个part类来实现对文件的上传和保存,Struts其实是在其基础上做了进一步的封装,更加简单易用.至于文件下载,Strut ...
- struts2实现文件上传和下载
在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的FileUpload组件来进行文件的上传,但是那样做的话,代码看起来 ...
- struts2的文件上传
在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的FileUpload组件来进行文件的上传,但是那样做的话,代码看起来 ...
- java中的文件上传下载
java中文件上传下载原理 学习内容 文件上传下载原理 底层代码实现文件上传下载 SmartUpload组件 Struts2实现文件上传下载 富文本编辑器文件上传下载 扩展及延伸 学习本门课程需要掌握 ...
- Struts2文件上传下载
Struts2文件上传 Struts2提供 FileUpload拦截器,用于解析 multipart/form-data 编码格式请求,解析上传文件的内容,fileUpload拦截器 默认在defau ...
随机推荐
- jira破解
JIRA是一个优秀的问题(or bugs,task,improvement,new feature )跟踪及管理软件. 它由Atlassian开发,采用J2EE技术.它正被广泛的开源软件组织,以 ...
- JavaAPI之Runtime类以及bat文件开启应用程序
package OtherToolsClass; import java.io.IOException; public class RuntimeDemo { /** * @param args */ ...
- 问题-WIN7 ..\Bin\InitCC32.exe".进程无法访问（拒绝访问）
问题现象: 问题原因:是InitCC32.exe没有权限. 问题处理:在DELPHI7的安装目录里设置用户权限,加入EVE... 这个用户.
- hdoj 1402 Prepared for New Acmer【快速幂】
Prepared for New Acmer Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...
- ASP.NET- 执行SQL超时的解决方案
在我们编写程序的时候,有时候要进行复杂的查询时,就会出现执行sql时间过长,引起页面执行不了并提示执行脚本超时,这就是我们遇到超时异常. 超时异常分两种情况:一种,是连接超时:一种,是执行超时.前者, ...
- Visual Studio动态代码生成的实现基础
这篇文章讨论以下3个问题: 1.代码生成器应该做什么 2.大多数代码生成器的缺点 3.动态代码生成实现的基础 代码生成器应该做什么? 我认为,目标是加快项目开发,方式是减少重复代码手工操作,实现是用过 ...
- jquery判断输入文字个数的统计代码
1.js代码部分 <script type="text/javascript"> $(function() { function albumNa ...
- cocos2d-x 添加纹理自动回收机制
转自:http://www.cnblogs.com/lancidie/archive/2013/04/13/3019375.html 1.不是一个完整的模块,所以不提供完整代码,只提供思路和核心代码. ...
- SQL Server磁盘I/O性能分析
SQL Server中的I/O操作类型: 1.对于内存中没有缓存的数据,第一次访问时需要将数据从所在的页面从数据文件中读取到内存中 2.在任何Insert/Update/Delete提交前,SQL S ...
- 使用 ZooKeeper 同步集群配置
用 ZooKeeper 同步集群配置,当需要修改所有节点配置时,将配置更新到 ZooKeeper 的一个节点,引起这个节点数据发生变化, 其他所有需要同步配置的节点上的本地 Watcher 会立即发现 ...