官方网站:http://www.ncmem.com/index.aspx

产品首页:http://www.ncmem.com/webapp/up6/index.aspx

开发文档:http://www.ncmem.com/doc/view.aspx?id=653253c5b16243f4835469e82c2c1146

控件下载:http://www.ncmem.com/webapp/up6/pack.aspx

示例下载:http://www.ncmem.com/webapp/up6/versions.aspx

联系信箱:1085617561@qq.com

联系QQ:1085617561
产品交流群:泽优Web大文件上传控件

扫码加群:
image

  asp.net:https://gitee.com/xproer/up6-asp-net/tree/6.5.38/

 jsp-eclipse:https://gitee.com/xproer/up6-jsp-eclipse/tree/6.5.38/

 jsp-myeclipse:https://gitee.com/xproer/up6-jsp-myeclipse/tree/6.5.38/

 jsp-springboot:https://gitee.com/xproer/up6-jsp-springboot/tree/6.5.38/

 php:https://gitee.com/xproer/up6-php/tree/6.5.38/

 vue-cli:https://gitee.com/xproer/up6-vue-cli

关键部分

前端用file.slice()分块

前端用FileReader获取每一分块的md5值

后端用MultipartFile接受分块文件

后端用FileOutputStream拼装分块文件

话不多说,直接上代码,我想这是你们最喜欢的

工程截图

<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8″%><%

String path = request.getContextPath();

String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;

String clientCookie = request.getHeader(“Cookie”);

%><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>up6.2-MySQL演示页面</title>

<link href=”js/up6.css” type=”text/css” rel=”Stylesheet”/>

<script type=”text/javascript” src=”js/jquery-1.4.min.js”></script>

<script type=”text/javascript” src=”js/json2.min.js” charset=”utf-8″></script>

<script type=”text/javascript” src=”js/up6.config.js” charset=”utf-8″></script>

<script type=”text/javascript” src=”js/up6.app.js” charset=”utf-8″></script>

<script type=”text/javascript” src=”js/up6.edge.js” charset=”utf-8″></script>

<script type=”text/javascript” src=”js/up6.file.js” charset=”utf-8″></script>

<script type=”text/javascript” src=”js/up6.folder.js” charset=”utf-8″></script>

<script type=”text/javascript” src=”js/up6.js” charset=”utf-8″></script>

<script language=”javascript” type=”text/javascript”>

var cbMgr = new HttpUploaderMgr();

cbMgr.event.md5Complete = function (obj, md5) { /*alert(md5);*/ };

cbMgr.event.fileComplete = function (obj) { /*alert(obj.pathSvr);*/ };

cbMgr.Config[“Cookie”] = ‘JSESSIONID=<%=request.getSession().getId()%>’;

cbMgr.Config.Fields[“test”] = “test”;

 

$(function()

{

cbMgr.load_to(“FilePanel”);//加载控件

});

</script>

</head>

 

<body>

<p>up6.2多文件上传演示页面</p>

<div id=”FilePanel”></div>

<div id=”msg”></div>

</body>

</html>

 

文件MD5计算

/**

* 把文件转成md5字符串

@param file

@return

*/

public static String fileToMD5(File file) {

if(file == null) {

return null;

}

if(file.exists() == false) {

return null;

}

if(file.isFile() == false) {

return null;

}

FileInputStream fis = null;

try {

//创建一个提供信息摘要算法的对象,初始化为md5算法对象

MessageDigest md = MessageDigest.getInstance(“MD5”);

fis = new FileInputStream(file);

byte[] buff = new byte[1024];

int len = 0;

while(true) {

len = fis.read(buff, 0, buff.length);

if(len == -1){

break;

}

//每次循环读取一定的字节都更新

md.update(buff,0,len);

}

//关闭流

fis.close();

//返回md5字符串

return bytesToHex(md.digest());

} catch (Exception e) {

e.printStackTrace();

}

return null;

}

 

文件夹文件夹名称生成逻辑

package up6.biz;

import java.io.IOException;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.UUID;

import up6.model.FileInf;

public class PathBuilderUuid extends PathBuilder{

/* 生成文件夹存储路径,完全与客户端文件夹结构保持一致

* 格式:

*  upload/2016/05/17/uuid/folder_name

* 更新记录:

*  2016-03-01 upload/uid/folders/uuid/folder_name

*   2016-05-17 将格式改为日期格式

*

*/

public String genFolder(int uid,String nameLoc) throws IOException

{

SimpleDateFormat fmtDD = new SimpleDateFormat(“dd”);

SimpleDateFormat fmtMM = new SimpleDateFormat(“MM”);

SimpleDateFormat fmtYY = new SimpleDateFormat(“yyyy”);

 

Date date = new Date();

String strDD = fmtDD.format(date);

String strMM = fmtMM.format(date);

String strYY = fmtYY.format(date);

 

String uuid = UUID.randomUUID().toString();

uuid = uuid.replace(“-“,””);

 

String path = this.getRoot() + “/”;

path = path.concat(strYY);

path = path.concat(“/”);

path = path.concat(strMM);

path = path.concat(“/”);

path = path.concat(strDD);

path = path.concat(“/”);

 

path = path.concat(uuid);

path = path.concat(“/”);

path = path.concat(nameLoc);

return path;

}

 

/* 保留原始文件名称,不检查文件是否重复

* 格式:

*   upload/uid/年/月/日/uuid/file_name

* @see Xproer.PathBuilder#genFile(int, Xproer.xdb_files)

*/

public String genFile(int uid,FileInf f) throws IOException{

String uuid = UUID.randomUUID().toString();

uuid = uuid.replace(“-“, “”);

 

 

SimpleDateFormat fmtDD = new SimpleDateFormat(“dd”);

SimpleDateFormat fmtMM = new SimpleDateFormat(“MM”);

SimpleDateFormat fmtYY = new SimpleDateFormat(“yyyy”);

 

Date date = new Date();

String strDD = fmtDD.format(date);

String strMM = fmtMM.format(date);

String strYY = fmtYY.format(date);

 

String path = this.getRoot() + “/”;

path = path.concat(strYY);

path = path.concat(“/”);

path = path.concat(strMM);

path = path.concat(“/”);

path = path.concat(strDD);

path = path.concat(“/”);

path = path.concat(uuid);

path = path.concat(“/”);

path = path.concat(f.nameLoc);

return path;

}

}

文件上传的效果

http://bbsres2.ncmem.com/4f09f40c.png

 

文件保存位置及逻辑

在up6中有两种保存模式,一种是md5一种是uuid。

md5由PathBuilderMd5生成存储路径。md5主要提供给文件使用,可在服务器端保存唯一的文件,有效避免重复文件。

uuid由PathBuilderUuid生成存储路径。uuid主要提供给文件夹使用,可以与本地文件夹结构完全保持一致。使用uuid模式上传文件夹时秒传功能会失效。

 

文件默认保存位置在项目路径下:

http://bbsres2.ncmem.com/3b3d0785.png

demo会自动生成upload文件夹

规则:upload/年/月/日/md5

http://bbsres2.ncmem.com/8d7cf154.png

 

代码截图:

http://bbsres2.ncmem.com/a3f89d66.png

 

http://bbsres2.ncmem.com/8e9fedc0.png

 

http://bbsres2.ncmem.com/65723f73.png

 

文件逻辑:

http://bbsres2.ncmem.com/a7f73af8.png

生成文件服务器存储路径

http://bbsres2.ncmem.com/df2f0fb4.png

 

文件夹逻辑:

http://bbsres2.ncmem.com/a72ba00f.png

http://bbsres2.ncmem.com/e5e3c5dc.png

生成文件夹存储路径

 

http://bbsres2.ncmem.com/516e2826.png

生成子文件路径

 

http://bbsres2.ncmem.com/64d1b40f.png

生成子目录路径

 

http://bbsres2.ncmem.com/00989477.png

示例下载地址:

jsp-eclipse:https://gitee.com/xproer/jsp-eclipse/tree/6.5.38/

jsp-myeclipse:https://gitee.com/xproer/jsp-myeclipse/tree/6.5.38/

jsp-springboot:https://gitee.com/xproer/jsp-springboot/tree/6.5.38/