jeesite集成plupload上传组件

下面是具体实现和调用的步骤和代码：

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:" onclick="${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:\" onclick=\"${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;@Controllerpublic 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>

测试效果图：