下面是具体实现和调用的步骤和代码:
1:引入plupload的js和其他的文件,具体可以在网上下载。包括moxie.js moxie.min.js Moxie.swf Moxie.xap plupload.dev.js plupload.full.min.js plupload.min.js,如下图:
2:在jeesite的head.jsp里面引入
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plupload/plupload.full.min.js"></script>
3:开发myupload.tag标签组件,并放到WEB-INFO/tags/sys下面
myupload.tag的实现代码如下:
<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ attribute name="input" type="java.lang.String" required="true" description="输入框"%>
<%@ attribute name="type" type="java.lang.String" required="true" description="files、images、flash、thumb"%>
<%@ attribute name="uploadPath" type="java.lang.String" required="true" description="文件的上传路径"%>
<%@ attribute name="uploadMaxSize" type="java.lang.String" required="false" description="扩展属性,允许上传的单个文件的最大值,单位是M,0表示没有限制"%>
<%@ attribute name="uploadMimeTypes" type="java.lang.String" required="false" description="扩展属性,允许上传的文件类型,比如zip,jpg以逗号分割多个,空表示没有限制"%>
<%@ attribute name="saveRealName" type="java.lang.String" required="false" description="扩展属性,保存名称是否是文件原名 true:保存原名 false:系统随机重命名"%>
<ol id="${input}Preview"></ol>
<c:if test="${!readonly}">
<a id="${input}sc" class="btn">添加</a>
<a href="javascript:" οnclick="${input}DelAll();" class="btn">清除</a>
</c:if>
<%-- <input type="button" value="开始上传" id="${input}upload-btn" /> --%>
<script type="text/javascript">
$(document).ready(function()
{
var files${input} = [];
var errors${input} = [];
var uploader${input} = new plupload.Uploader({ //实例化一个plupload上传对象
browse_button : "${input}sc",
runtimes : 'html5,html,flash,silverlight',//设置运行环境,会按设置的顺序,可以选择的值有html5,gears,flash,silverlight,browserplus,html
flash_swf_url : '${pageContext.request.contextPath}/static/plupload/Moxie.swf',
silverlight_xap_url : '${pageContext.request.contextPath}/static/plupload/Moxie.xap',
url : '${pageContext.request.contextPath}/uploadFile.do?type=${type}&uploadPath=${uploadPath}',//上传文件路径
max_file_size : '10gb',//100b, 10kb, 10mb, 1gb
chunk_size : '100mb',//分块大小,小于这个大小的不分块
unique_names : true,//生成唯一文件名
init:{
//绑定文件添加进队列事件
FilesAdded:function(uploader${input},files${input})
{
for(var i = 0, len = files${input}.length; i<len; i++){
var file_name = files${input}[i].name; //文件名
var uploadMaxSizes=files${input}[i].size/(1024*1024);
var tmeidatype="${uploadMimeTypes}";
if(tmeidatype!=""){
if(tmeidatype.indexOf(file_name.substring(file_name.lastIndexOf('.') + 1))>-1)
{
}else
{
uploader${input}.removeFile(files${input}[i]);
alert("上传文件类型不合法,只允许上传"+tmeidatype);
return ;
}
}
var tsize=${uploadMaxSize}+"";
if(tsize!=""&&tsize>0){
if(uploadMaxSizes>tsize)
{
uploader${input}.removeFile(files${input}[i]);
alert("上传文件大小超过限制"+tsize+"M");
return ;
}
}
//构造html来更新UI
var html = '<li id="file-' + files${input}[i].id +'"><p class="file-name">' + file_name + '</p><p class="progress"></p><div id="progress'+ files${input}[i].id+'"></div></li>';
$(html).appendTo('#file-list${input}');
}
uploader${input}.start(); //开始上传
},
BeforeUpload:function(uploader${input},file)
{
var tsaveName="${saveRealName}";
if(tsaveName=="true"){
var tsaveRealName= encodeURI(file.name);
tsaveRealName=encodeURI(tsaveRealName);
uploader${input}.settings.url = (uploader${input}.settings.url).split("&savename")[0]+'&savename='+tsaveRealName;
}
},
UploadProgress:function(uploader${input},file)
{
if(file.percent!=100){
$('#file-'+file.id+' .progress').css('width',file.percent + '%');//控制进度条
$("#progress"+file.id).html("上传进度为:" + file.percent + "%"+" ");
}else
{
$("#progress"+file.id).html("文件已经分块上传成功,后台合并中请稍后...");
}
},
FileUploaded:function(up,file,info)
{
var response = $.parseJSON(info.response);
if (response.status) {
$("#${input}").val($("#${input}").val()+($("#${input}").val(response.fileUrl)==""?response.fileUrl:"|"+response.fileUrl));
$("#progress"+file.id).html("");
$("#file-list${input}").html("");
${input}Preview();
}else
{
$("#file-list${input}").html("<font color='red'>"+file.name+"上传失败,请联系系统管理员。</font>");
}
}
}
});
uploader${input}.init();
//上传按钮
// $('#${input}upload-btn').click(function(){
// uploader${input}.start(); //开始上传
// });
});
function ${input}Del(obj){
var url = $(obj).prev().attr("url");
$("#${input}").val($("#${input}").val().replace("|"+url,"","").replace(url+"|","","").replace(url,"",""));
${input}Preview();
}
function ${input}DelAll(){
$("#${input}").val("");
$("#file-list${input}").html("");
${input}Preview();
}
function ${input}Preview(){
var li, urls = $("#${input}").val().split("|");
$("#${input}Preview").children().remove();
for (var i=0; i<urls.length; i++){
if (urls[i]!=""){//<c:if test="${type eq 'thumb' || type eq 'images'}">
li = "<li><img src=\""+urls[i]+"\" url=\""+urls[i]+"\" style=\"max-width:${empty maxWidth ? 200 : maxWidth}px;max-height:${empty maxHeight ? 200 : maxHeight}px;_height:${empty maxHeight ? 200 : maxHeight}px;border:0;padding:3px;\">";//</c:if><c:if test="${type ne 'thumb' && type ne 'images'}">
li = "<li><a href=\""+urls[i]+"\" url=\""+urls[i]+"\" target=\"_blank\">"+decodeURIComponent(urls[i].substring(urls[i].lastIndexOf("/")+1))+"</a>";//</c:if>
li += " <c:if test="${!readonly}"><a href=\"javascript:\" οnclick=\"${input}Del(this);\">×</a></c:if></li>";
$("#${input}Preview").append(li);
}
}
if ($("#${input}Preview").text() == ""){
$("#${input}Preview").html("<li style='list-style:none;padding-top:5px;'>无</li>");
}
}
</script>
<div class="wraper">
<ul id="file-list${input}">
</ul>
</div>
4:开发后台上传controller代码
</pre><pre>
package cn.huazx.ebp.common.web;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.net.URLDecoder;
import java.util.Calendar;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.alibaba.fastjson.JSON;
import cn.huazx.ebp.modules.sys.utils.UserUtils;
@Controller
public class UploadController {
private String savePath;// 数据库存储路径
private String uploadPath;// 附件的实际存储的绝对路径
@RequestMapping(value = "uploadFile.do", method = RequestMethod.POST)
public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
Calendar date = Calendar.getInstance();
response.setCharacterEncoding("UTF-8");
Integer chunk = null; /* 分割块数 */
Integer chunks = null; /* 总分割数 */
String tempFileName = null; /* 临时文件名 */
String newFileName = null; /* 最后合并后的新文件名 */
BufferedOutputStream outputStream = null;
/* System.out.println(FileUtils.getTempDirectoryPath()); */
/**
* 还是加个null工具类判断把 fuck
*/
String savename=UserUtils.checkNull(request.getParameter("savename"));//保存名称
if(!savename.equals("")){
savename=URLDecoder.decode( request.getParameter("savename"), "utf-8");
System.out.println("保存文件原名"+savename);
}
else
{
System.out.println("系统随机重命名");
}
uploadPath = request.getSession().getServletContext()
.getRealPath("uploadPath" + File.separator + UserUtils.getUser().getLoginName() + File.separator
+ request.getParameter("type") + request.getParameter("uploadPath") + File.separator
+ date.get(Calendar.YEAR) + File.separator + (date.get(Calendar.MONTH) + 1) + File.separator
+ date.get(Calendar.DAY_OF_MONTH));
savePath = "uploadPath" + File.separator + UserUtils.getUser().getLoginName() + File.separator
+ request.getParameter("type") + request.getParameter("uploadPath") + File.separator
+ date.get(Calendar.YEAR) + File.separator + (date.get(Calendar.MONTH) + 1) + File.separator
+ date.get(Calendar.DAY_OF_MONTH);
savePath = savePath.replaceAll("\\\\", "/");
File up = new File(uploadPath);
if (!up.exists()) {
up.mkdirs();
}
if (ServletFileUpload.isMultipartContent(request)) {
try {
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(1024);
/* factory.setRepository(new File(repositoryPath));// 设置临时目录 */
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List<FileItem> items = upload.parseRequest(request);
for (FileItem item : items) {
if (item.isFormField()) /* 是文本域 */
{
if (item.getFieldName().equals("name")) {
tempFileName = item.getString();
/* System.out.println("临时文件名:" + tempFileName); */
} else if (item.getFieldName().equals("chunk")) {
chunk = Integer.parseInt(item.getString());
/* System.out.println("当前文件块:" + (chunk + 1)); */
} else if (item.getFieldName().equals("chunks")) {
chunks = Integer.parseInt(item.getString());
/* System.out.println("文件总分块:" + chunks); */
}
} else { /* 如果是文件类型 */
if (tempFileName != null) {
String chunkName = tempFileName;
if (chunk != null) {
chunkName = chunk + "_" + tempFileName;
}
File savedFile = new File(uploadPath, chunkName);
item.write(savedFile);
}
}
}
if(!savename.equals("")){
newFileName =savename;
}else{
newFileName = UUID.randomUUID().toString().replace("-", "").concat(".").concat(FilenameUtils.getExtension(tempFileName));
}
if (chunk != null && chunk + 1 == chunks) {
outputStream = new BufferedOutputStream(new FileOutputStream(new File(uploadPath, newFileName)));
/* 遍历文件合并 */
for (int i = 0; i < chunks; i++) {
File tempFile = new File(uploadPath, i + "_" + tempFileName);
byte[] bytes = FileUtils.readFileToByteArray(tempFile);
outputStream.write(bytes);
outputStream.flush();
tempFile.delete();
}
outputStream.flush();
}
Map<String, Object> m = new HashMap<String, Object>();
m.put("status", true);
// savePath
// m.put( "fileUrl",uploadPath+ "\\"
// + newFileName );
m.put("fileUrl", savePath + "/" + newFileName);
System.out.println(savePath);
response.getWriter().write(JSON.toJSONString(m));
} catch (FileUploadException e) {
e.printStackTrace();
Map<String, Object> m = new HashMap<String, Object>();
m.put("status", false);
response.getWriter().write(JSON.toJSONString(m));
} catch (Exception e) {
e.printStackTrace();
Map<String, Object> m = new HashMap<String, Object>();
m.put("status", false);
response.getWriter().write(JSON.toJSONString(m));
} finally {
try {
if (outputStream != null)
outputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
最后写个测试的jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>测试附件</title>
<meta name="decorator" content="default"/>
<%@include file="/WEB-INF/views/include/head.jsp" %>
</head>
<body>
<div class="control-group">
<div class="control-group" style="width: 200px;">
<label class="control-label">文件附件测试:</label>
<div class="controls">
<input type="hidden" id="files" name="files" value="" />
<sys:myupload input="files" type="files" uploadPath="/cms/article" uploadMaxSize="0" uploadMimeTypes="exe,zip,iso,doc" saveRealName="true"/>
</div>
</div>
<div class="control-group">
<label class="control-label">附件图片测试:</label>
<div class="controls">
<input type="hidden" id="filesee" name="filesee" value="" />
<sys:myupload input="filesee" type="images" uploadPath="/cms/article" uploadMaxSize="10" uploadMimeTypes="jpg"/>
</div>
</div>
</div>
</body>
</html>
测试效果图: