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 ...
随机推荐
- 29个你必须知道的Linux命令
虽然Linux发行版支持各种各样的饿GUI(graphical user interfaces),但在某些情况下,Linux的命令行接口(bash)仍然是简单快速的.Bash和 Linux Shell ...
- RecyclerView设置verticalSapcing等
RecyclerView没有像GridView那样有提供verticalSpacing属性,上StackOverflow找到了一种替代方法,代码如下 public class SpacesItemDe ...
- 打造无DLL版穿透防火墙Downloader
这份代码的思路来自于国外EES组织的Aphex.基本上所有的无DLL Download都是利用的这种方法.其实也就是用烂了的远程注入法.不过注入的对象不是一个DLL,而是本身的一个过程.下面是代码,由 ...
- gtest框架使用
gtest文档说明: 由于公司单元测试的需要,自己花了大半天时间下载了一个gtest框架,使用了一些测试例子,总览了coderzh的玩转gtest测试框架,又看了几篇gtest博客,写下了以下内容,作 ...
- ng-cookie 的基本使用
2.angular-cookie - 配置$cookiesProvider ```angular.module("Demo",[]).config(["$cookiesP ...
- DNS服务未响应的简单解决办法
今天晚上下班回家,打开电脑,发现打不开网页了,同一个wifi环境下,我的手机是可以连接上的,网上搜了一大推,又是重启服务,又是重新填写dns服务地址,都不管用, 该怎么办呢??. 其实发现很简单,打开 ...
- SQLite使用教程10 运算符
SQLite 运算符 SQLite 运算符是什么? 运算符是一个保留字或字符,主要用于 SQLite 语句的 WHERE 子句中执行操作,如比较和算术运算. 运算符用于指定 SQLite 语句中的条件 ...
- cocos2d-x之蒙板，局部高亮可点，CCRenderTexture
转自:http://www.2cto.com/kf/201207/144656.html 蒙板,局部高亮可点的用处大多是在新手引导的时候,引导玩家一步一步的走游戏的操作流程. 之前写了一个cocos2 ...
- mysql下命令行执行sql脚本
1. 登录mysql mysql -uroot -p 2. 执行脚本 mysql>use dbname; mysql>source /home/db/xx.sql
- uva 624 CD 01背包打印路径
// 集训最终開始了.来到水题先 #include <cstdio> #include <cstring> #include <algorithm> #includ ...