zoukankan      html  css  js  c++  java
  • b/s实现大文件上传分片上传断点续传

    关键部分

    前端用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

    详细信息可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/11/20/net%e4%b8%8a%e4%bc%a0%e5%a4%a7%e6%96%87%e4%bb%b6%e7%9a%84%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88/

  • 相关阅读:
    C he 指针
    typedef 与 define
    (转)ubuntu中安装man手册查看函数原型
    .9 赫夫曼编码
    .8 AVL树
    PowerDesigner使用技巧
    C#基础
    NET框架设计
    Sql Server 执行计划及Sql查询优化
    SQL SERVER函数浅析
  • 原文地址:https://www.cnblogs.com/songsu/p/12016139.html
Copyright © 2011-2022 走看看