jeesite集成plupload上传组件

最新推荐文章于 2021-10-09 21:04:57 发布

mozheshashou

最新推荐文章于 2021-10-09 21:04:57 发布

阅读量9.8k

点赞数 1

分类专栏： plupload 文章标签： jeesite集成plupload上传组

本文链接：https://blog.csdn.net/mozheshashou/article/details/52035115

版权

plupload 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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里面引入

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>

测试效果图：