1. 程式人生 > >大檔案上傳第二彈(分片、秒傳、斷點續傳)

大檔案上傳第二彈(分片、秒傳、斷點續傳)

關鍵部分

  • 前端用file.slice()分塊
  • 前端用FileReader獲取每一分塊的md5值
  • 後端用MultipartFile接受分塊檔案
  • 後端用FileOutputStream拼裝分塊檔案

話不多說,直接上程式碼,我想這是你們最喜歡的這裡寫圖片描述

html

<!DOCTYPE HTML>
<html>
<head>

    <meta charset="utf-8">

    <title>HTML5大檔案分片上傳示例</title>

    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"
></script> <script src="md5.js"></script> <script> var i = -1; var succeed = 0; var databgein; //開始時間 var dataend; //結束時間 var action=false; //false檢驗分片是否上傳過(預設); true上傳檔案 var page = { init: function(){ $("#upload").click(function(){ databgein=new Date(); var file = $("#file"
)[0].files[0]; //檔案物件 isUpload(file); }); } }; $(function(){ page.init(); }); function isUpload (file) { //構造一個表單,FormData是HTML5新增的 var form = new FormData();    var r = new FileReader();   r.readAsBinaryString(file); $(r).load(function(e){   var bolb = e.target.result;   var md5 = hex_md5(bolb); form.append("md5"
, md5); //Ajax提交 $.ajax({ url: "http://localhost:8080//bookQr/test/isUpload", type: "POST", data: form, async: true, //非同步 processData: false, //很重要,告訴jquery不要對form進行處理 contentType: false, //很重要,指定為false才能形成正確的Content-Type success: function(data){ var dataObj = eval("("+data+")"); var uuid = dataObj.fileId; var date = dataObj.date; if (dataObj.flag == "1") { //沒有上傳過檔案 upload(file,uuid,md5,date); } else if(dataObj.flag == "2") { //已經上傳部分 upload(file,uuid,md5,date);       } else if(dataObj.flag == "3") { //檔案已經上傳過 alert("檔案已經上傳過,秒傳了!!"); $("#uuid").append(uuid);         } },error: function(XMLHttpRequest, textStatus, errorThrown) { alert("伺服器出錯!"); } });    }) } /* * file 檔案物件 * uuid 後端生成的uuid * filemd5 整個檔案的md5 * date 檔案第一個分片上傳的日期(如:20170122) */ function upload (file,uuid,filemd5,date) { name = file.name; //檔名 size = file.size; //總大小 var shardSize = 5 * 1024 * 1024, //以5MB為一個分片 shardCount = Math.ceil(size / shardSize); //總片數 if (i > shardCount) { i = -1; i = shardCount; } else { if(!action){ i += 1; //只有在檢測分片時,i才去加1; 上傳檔案時無需加1 } } //計算每一片的起始與結束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //構造一個表單,FormData是HTML5新增的 var form = new FormData(); if(!action){ form.append("action", "check"); //檢測分片是否上傳 $("#param").append("action==check "); }else{ form.append("action", "upload"); //直接上傳分片 form.append("data", file.slice(start,end)); //slice方法用於切出檔案的一部分 $("#param").append("action==upload "); } form.append("uuid", uuid); form.append("filemd5", filemd5); form.append("date", date); form.append("name", name); form.append("size", size); form.append("total", shardCount); //總片數 form.append("index", i+1); //當前是第幾片 var ssindex = i+1; $("#param").append("index=="+ssindex+"<br/>"); //按大小切割檔案段   var data = file.slice(start, end);    var r = new FileReader();   r.readAsBinaryString(data); $(r).load(function(e){   var bolb = e.target.result;   var md5 = hex_md5(bolb); form.append("md5", md5); //Ajax提交 $.ajax({ url: "http://localhost:8080//bookQr/test/upload", type: "POST", data: form, async: true, //非同步 processData: false, //很重要,告訴jquery不要對form進行處理 contentType: false, //很重要,指定為false才能形成正確的Content-Type success: function(data){ var dataObj = eval("("+data+")"); var fileuuid = dataObj.fileId; var flag = dataObj.flag; //伺服器返回該分片是否上傳過 if(!action){ if (flag == "1") { //未上傳 action = true; } else if(dataObj.flag == "2") { //已上傳   action = false; ++succeed;     } //遞迴呼叫     upload(file,uuid,filemd5,date); }else{ //伺服器返回分片是否上傳成功 //改變介面 ++succeed; $("#output").text(succeed + " / " + shardCount); if (i+1 == shardCount) { dataend=new Date(); $("#uuid").append(fileuuid); $("#usetime").append(dataend.getTime()-databgein.getTime()); } else { //已上傳成功,然後檢測下一個分片   action = false; //遞迴呼叫     upload(file,uuid,filemd5,date);     } } },error: function(XMLHttpRequest, textStatus, errorThrown) { alert("伺服器出錯!"); } });    }) } </script> </head> <body> <input type="file" id="file" /> <button id="upload">上傳</button> <span id="output" style="font-size:12px">等待</span> <span id="usetime" style="font-size:12px;margin-left:20px;">用時</span> <span id="uuid" style="font-size:12px;margin-left:20px;">uuid==</span> <br/> <br/> <br/> <br/> <span id="param" style="font-size:12px;margin-left:20px;">param==</span> </body> </html>

controller

package com.yxtech.sys.controller;

import com.yxtech.common.Constant;
import com.yxtech.sys.domain.FileRes;
import com.yxtech.sys.service.FileResService;
import com.yxtech.sys.service.ResService;
import com.yxtech.utils.file.FileMd5Util;
import com.yxtech.utils.file.NameUtil;
import com.yxtech.utils.file.PathUtil;
import jodd.datetime.JDateTime;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import tk.mybatis.mapper.entity.Example;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.*;

/**
 * Created by Administrator on 2015/10/9.
 */
@RestController
@Scope("prototype")
@RequestMapping(value = "/test")
public class testController {
    @Autowired
    private FileResService fileResService;
    @Autowired
    private ResService resService;


    /**
     * 上傳檔案
     *
     * @param request
     * @return
     * @throws IllegalStateException
     * @throws IOException
     */
    @RequestMapping(value = "/upload")
    public Map<String, Object> upload(
            HttpServletRequest request, @RequestParam(value = "data",required = false) MultipartFile multipartFile) throws IllegalStateException, IOException, Exception {

        String action = request.getParameter("action");
        String uuid = request.getParameter("uuid");
        String fileName = request.getParameter("name");
        String size = request.getParameter("size");//總大小
        int total = Integer.valueOf(request.getParameter("total"));//總片數
        int index = Integer.valueOf(request.getParameter("index"));//當前是第幾片
        String fileMd5 = request.getParameter("filemd5"); //整個檔案的md5
        String date = request.getParameter("date"); //檔案第一個分片上傳的日期(如:20170122)
        String md5 = request.getParameter("md5"); //分片的md5

        //生成上傳檔案的路徑資訊,按天生成
        String savePath = Constant.FILE_PATH + File.separator + date;
        String saveDirectory = PathUtil.getAppRootPath(request) + savePath + File.separator + uuid;
        //驗證路徑是否存在,不存在則建立目錄
        File path = new File(saveDirectory);
        if (!path.exists()) {
            path.mkdirs();
        }
        //檔案分片位置
        File file = new File(saveDirectory, uuid + "_" + index);

        //根據action不同執行不同操作. check:校驗分片是否上傳過; upload:直接上傳分片
        Map<String, Object> map = null;
        if("check".equals(action)){
            String md5Str = FileMd5Util.getFileMD5(file);
            if (md5Str != null && md5Str.length() == 31) {
                System.out.println("check length =" + md5.length() + " md5Str length" + md5Str.length() + "   " + md5 + " " + md5Str);
                md5Str = "0" + md5Str;
            }
            if (md5Str != null && md5Str.equals(md5)) {
                //分片已上傳過
                map = new HashMap<>();
                map.put("flag", "2");
                map.put("fileId", uuid);
                map.put("status", true);
                return map;
            } else {
                //分片未上傳
                map = new HashMap<>();
                map.put("flag", "1");
                map.put("fileId", uuid);
                map.put("status", true);
                return map;
            }
        }else if("upload".equals(action)){
            //分片上傳過程中出錯,有殘餘時需刪除分塊後,重新上傳
            if (file.exists()) {
                file.delete();
            }
            multipartFile.transferTo(new File(saveDirectory, uuid + "_" + index));
        }

        if (path.isDirectory()) {
            File[] fileArray = path.listFiles();
            if (fileArray != null) {
                if (fileArray.length == total) {
                    //分塊全部上傳完畢,合併
                    String suffix = NameUtil.getExtensionName(fileName);

                    File newFile = new File(PathUtil.getAppRootPath(request) + savePath, uuid + "." + suffix);
                    FileOutputStream outputStream = new FileOutputStream(newFile, true);//檔案追加寫入
                    byte[] byt = new byte[10 * 1024 * 1024];
                    int len;

                    FileInputStream temp = null;//分片檔案
                    for (int i = 0; i < total; i++) {
                        int j = i + 1;
                        temp = new FileInputStream(new File(saveDirectory, uuid + "_" + j));
                        while ((len = temp.read(byt)) != -1) {
                            System.out.println("-----" + len);
                            outputStream.write(byt, 0, len);
                        }
                    }
                    //關閉流
                    temp.close();
                    outputStream.close();
                    //修改FileRes記錄為上傳成功
                    Example example = new Example(FileRes.class);
                    Example.Criteria criteria = example.createCriteria();
                    criteria.andEqualTo("md5",fileMd5);
                    FileRes fileRes = new FileRes();
                    fileRes.setStatus(Constant.ONE);
                    fileResService.updateByExampleSelective(fileRes,example);
                }else if(index == 1){
                    //檔案第一個分片上傳時記錄到資料庫
                    FileRes fileRes = new FileRes();
                    String name = NameUtil.getFileNameNoEx(fileName);
                    if (name.length() > 50) {
                        name = name.substring(0, 50);
                    }
                    fileRes.setName(name);
                    fileRes.setSuffix(NameUtil.getExtensionName(fileName));
                    fileRes.setUuid(uuid);
                    fileRes.setPath(savePath + File.separator + uuid + "." + fileRes.getSuffix());
                    fileRes.setSize(Integer.parseInt(size));
                    fileRes.setMd5(fileMd5);
                    fileRes.setStatus(Constant.ZERO);
                    fileRes.setCreateTime(new Date());
                    this.fileResService.insert(fileRes);
                }
            }
        }

        map = new HashMap<>();
        map.put("flag", "3");
        map.put("fileId", uuid);
        map.put("status", true);
        return map;
    }

    /**
     * 上傳檔案前校驗
     *
     * @param request
     * @return
     * @throws IOException
     */
    @RequestMapping(value = "/isUpload")
    public Map<String, Object> isUpload(HttpServletRequest request) throws Exception {

        String md5 = request.getParameter("md5");

        Example example = new Example(FileRes.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("md5", md5);
        List<FileRes> list = fileResService.selectByExample(example);

        Map<String, Object> map = null;
        if (list == null || list.size() == 0) {
            //沒有上傳過檔案
            String uuid = UUID.randomUUID().toString();
            map = new HashMap<>();
            map.put("flag", "1");
            map.put("fileId", uuid);
            map.put("date", new JDateTime().toString("YYYYMMDD"));
            map.put("status", true);
        } else {
            FileRes fileRes = list.get(0);
            //求檔案上傳日期
            SimpleDateFormat sdf=new SimpleDateFormat("YYYYMMDD");
            Date date=new Date();
            String strDate=sdf.format(date);
            if(fileRes.getStatus()==0){
                //檔案上傳部分
                map = new HashMap<>();
                map.put("flag", "2");
                map.put("fileId", fileRes.getUuid());
                map.put("date",strDate);
                map.put("status", true);
            }else if(fileRes.getStatus()==1){
                //檔案上傳成功
                map = new HashMap<>();
                map.put("flag", "3");
                map.put("fileId", fileRes.getUuid());
                map.put("date",strDate);
                map.put("status", true);
            }

        }

        return map;
    }


}

FileMd5Util

package com.yxtech.utils.file;

import java.io.File;
import java.io.FileInputStream;
import java.math.BigInteger;
import java.security.MessageDigest;

/**
 * @author cuihao
 * @create 2017-01-20-15:13
 */

public class FileMd5Util {
    public static final String KEY_MD5 = "MD5";
    public static final String CHARSET_ISO88591 = "ISO-8859-1";
    /**
     * Get MD5 of one file:hex string,test OK!
     *
     * @param file
     * @return
     */
    public static String getFileMD5(File file) {
        if (!file.exists() || !file.isFile()) {
            return null;
        }
        MessageDigest digest = null;
        FileInputStream in = null;
        byte buffer[] = new byte[1024];
        int len;
        try {
            digest = MessageDigest.getInstance("MD5");
            in = new FileInputStream(file);
            while ((len = in.read(buffer, 0, 1024)) != -1) {
                digest.update(buffer, 0, len);
            }
            in.close();
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
        BigInteger bigInt = new BigInteger(1, digest.digest());
        return bigInt.toString(16);
    }

    /***
     * Get MD5 of one file!test ok!
     *
     * @param filepath
     * @return
     */
    public static String getFileMD5(String filepath) {
        File file = new File(filepath);
        return getFileMD5(file);
    }

    /**
     * MD5 encrypt,test ok
     *
     * @param data
     * @return byte[]
     * @throws Exception
     */
    public static byte[] encryptMD5(byte[] data) throws Exception {

        MessageDigest md5 = MessageDigest.getInstance(KEY_MD5);
        md5.update(data);
        return md5.digest();
    }

    public static byte[] encryptMD5(String data) throws Exception {
        return encryptMD5(data.getBytes(CHARSET_ISO88591));
    }
    /***
     * compare two file by Md5
     *
     * @param file1
     * @param file2
     * @return
     */
    public static boolean isSameMd5(File file1,File file2){
        String md5_1= FileMd5Util.getFileMD5(file1);
        String md5_2= FileMd5Util.getFileMD5(file2);
        return md5_1.equals(md5_2);
    }
    /***
     * compare two file by Md5
     *
     * @param filepath1
     * @param filepath2
     * @return
     */
    public static boolean isSameMd5(String filepath1,String filepath2){
        File file1=new File(filepath1);
        File file2=new File(filepath2);
        return isSameMd5(file1, file2);
    }

    public static void main(String[] args) {
//        for(int i=1;i<79;i++){
//            File file = new File("F:\\bookQr_SYS\\target\\bookQr\\files\\20170122\\2124b3f9-a4c8-4297-a182-6249010dcd72\\2124b3f9-a4c8-4297-a182-6249010dcd72_"+i);
            File file = new File("F:\\bookQr_SYS\\target\\bookQr\\files\\20170122\\2124b3f9-a4c8-4297-a182-6249010dcd72.mp4");
            String md5Str = getFileMD5(file);
            System.out.println(""+md5Str.length()+" "+md5Str);
//        }

    }
}

NameUtil


/**
 * Created by Administrator on 2015/10/12.
 */
public class NameUtil {
    /**
     * Java檔案操作 獲取副檔名
     */
    public static String getExtensionName(String filename) {
        if ((filename != null) && (filename.length() > 0)) {
            int dot = filename.lastIndexOf('.');
            if ((dot > -1) && (dot < (filename.length() - 1))) {
                return filename.substring(dot + 1);
            }
        }
        return filename.toLowerCase();
    }

    /**
     * Java檔案操作 獲取不帶副檔名的檔名
     */
    public static String getFileNameNoEx(String filename) {
        if ((filename != null) && (filename.length() > 0)) {
            int dot = filename.lastIndexOf('.');
            if ((dot > -1) && (dot < (filename.length()))) {
                return filename.substring(0, dot);
            }
        }
        return filename.toLowerCase();
    }

    public static void main(String[] args) {
        String str = "AAAbb.jpg";
        System.out.println(getExtensionName(str).toLowerCase());
        System.out.println(getFileNameNoEx(str).toUpperCase());
    }
}

PathUtil


import com.yxtech.sys.controller.MailController;

import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

/**
 * Created by Administrator on 2015/10/12.
 */
public class PathUtil {

    /**
     *
     * @param request
     * @return 返回結果類似於 “F:\workSpace\bookQr\src\main\webapp\”
     */
    public static String  getAppRootPath(HttpServletRequest request){
        //ServletActionContext.getServletContext().getRealPath("/")+"upload";
        return request.getSession().getServletContext().getRealPath("/");
    }

    /**
     *自定義檔案儲存路徑
     * @param request
     */
    public static String  getCustomRootPath(HttpServletRequest request){
        String path = "";
        Properties prop = new Properties();
        InputStream in = MailController.class.getResourceAsStream("/config/jdbc.properties");
        try {
            prop.load(in);
            path = prop.getProperty("FILE_PATH").trim();

        } catch (IOException e) {
            e.printStackTrace();
        }
        return path;
    }

    /**
     *
     * @param request
     * @return http://www.qh.com:8080/projectName
     */
    public static String  getHttpURL(HttpServletRequest request) {
        StringBuffer buff = new StringBuffer();
        buff.append("http://");
        buff.append(request.getServerName());
        buff.append(":");
        buff.append(request.getServerPort());
        buff.append(request.getContextPath());
        return buff.toString();
    }


}