前段WebUploader；JavaEE大檔案分片上傳接收

阿新 • • 發佈：2019-01-20

Web大檔案分片上傳
Web環境中大檔案上傳不能再用form表單一次上傳了，這樣效率太低；
我在不斷嘗試SpringMVC環境下分片接受檔案，最終失敗；原因目測是 SpringMVC、Struts框架是不支援HTML5方式上傳的（這類框架只能支援Form表單方式的檔案上傳，或者FLash）

那我們可以使用Servlet和SpringMVC結合整合方式實現大檔案分片上傳；

一、來看看我們的web.xml的配置
這裡寫圖片描述

很明顯兩個servlet,上面一個配置的是SpringMVC的入口，下面servlet是視訊上傳；
他們倆的url-pattern 不能衝突；

二、先來看看WebUploader 的前端程式碼
這裡寫圖片描述

以下是程式碼:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base
    href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" 
>
<script type="text/javascript" src="webuploader/jquery-1.7.2.js"></script>
<script type="text/javascript" src="webuploader/webuploader.min.js"></script>
<link href="webuploader/webuploader.css" type="css/text" />
</head>
<body>
    <h2>Hello World!</h2> 

    <div id="thelist" class="uploader-list"></div>
    <div style="margin: 20px 20px 20px 0;">
        <div id="picker" class="form-control-focus">選擇檔案</div>
    </div>
    <button id="btnSync" type="button" class="btn btn-warning">開始同步</button>

    <script>
        var uploader = WebUploader.create({

            // swf檔案路徑
            swf : 'webuploader/Uploader.swf',
            // 檔案接收服務端。
            server : 'UploadVideoServlet',
            // 選擇檔案的按鈕。可選。
            // 內部根據當前執行是建立，可能是input元素，也可能是flash.
            pick : '#picker',
            threads:2,
            chunked: true,  //分片處理
            chunkSize: 5 * 1024 * 1024, //每片5M  
            threads:1,//上傳併發數。允許同時最大上傳程序數。
            // 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！
            resize : false
        });

        // 當有檔案被新增進佇列的時候
        uploader.on('fileQueued', function(file) {
            //alert(123);
            $("#thelist").append(
                    '<div id="' + file.id + '" class="item">'
                            + '<h4 class="info">' + file.name + '</h4>'
                            + '<p class="state">等待上傳...</p>' + '</div>');
        });

        uploader.on('uploadSuccess', function(file) {
            alert(uploader.options.formData.guid);
            alert(Math.ceil(file.size/(5*1024*1024)));
            alert(file.name);
            $('#' + file.id).find('p.state').text('已上傳');
            $.post("UploadSuccessServlet", { "guid": uploader.options.formData.guid,chunks:Math.ceil(file.size/(5*1024*1024)),fileName:file.name},
               function(data){

            }, "json");
        });

        uploader.on('uploadError', function(file) {
            $('#' + file.id).find('p.state').text('上傳出錯');
        });

        uploader.on('uploadComplete', function(file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        $("#btnSync").on('click', function() {
            if ($(this).hasClass('disabled')) {
                return false;
            }
            uploader.options.formData.guid = Math.random();
            uploader.upload();

        });
    </script>
</body>
</html>

三、servlet分片獲取
分片就是前段將檔案分成多個，每片都是一個post請求，有多少片就請求多少次servlet；
我們以獲取的guid為檔名建立臨時資料夾，以chunk（片序號）為檔名來儲存檔案；
這裡寫圖片描述

以下為程式碼：

package com.airodlcx;

import java.io.File;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.beanutils.BeanUtils;
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;

/**
 * Servlet implementation class UploadVideo
 */
public class UploadVideoServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UploadVideoServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String path = request.getSession().getServletContext().getRealPath("/upload");
        System.out.println(path);
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // 2、建立一個檔案上傳解析器
        ServletFileUpload upload = new ServletFileUpload(factory);
        // 解決上傳檔名的中文亂碼
        upload.setHeaderEncoding("UTF-8");
        // 3、判斷提交上來的資料是否是上傳表單的資料
        if (!ServletFileUpload.isMultipartContent(request)) {
            return;
        }
        // 4、使用ServletFileUpload解析器解析上傳資料，解析結果返回的是一個List<FileItem>集合，每一個FileItem對應一個Form表單的輸入項
        List<FileItem> list = null;
        try {
            list = upload.parseRequest(request);
        } catch (FileUploadException e) {
            e.printStackTrace();
        }

        HashMap<String, String> map = new HashMap<String, String>();

        System.out.println("-------------------------------------------------------------");
        for (FileItem item : list) {
            if (item.isFormField()) {
                /**
                 * 表單資料
                 */
                String name = item.getFieldName();
                // 解決普通輸入項的資料的中文亂碼問題
                String value = item.getString("UTF-8");
                // value = new String(value.getBytes("iso8859-1"),"UTF-8");
                System.out.println(name + "=" + value);
                map.put(name, value);// 放入map集合
            } else {
                /**
                 * 檔案上傳
                 */

                File fileParent = new File(path + "/" + map.get("guid"));//以guid建立臨時資料夾
                System.out.println(fileParent.getPath());
                if (!fileParent.exists()) {
                    fileParent.mkdir();
                }


                String filename = item.getName();
                if (filename == null || filename.trim().equals("")) {
                    continue;
                }
                // 注意：不同的瀏覽器提交的檔名是不一樣的，有些瀏覽器提交上來的檔名是帶有路徑的，如：
                // c:\a\b\1.txt，而有些只是單純的檔名，如：1.txt
                // 處理獲取到的上傳檔案的檔名的路徑部分，只保留檔名部分
                filename = filename.substring(filename.lastIndexOf("\\") + 1);

                //建立檔案
                File file;
                if (map.get("chunks") != null) {
                    file = new File(fileParent, map.get("chunk"));
                } else {
                    file = new File(fileParent, "0");
                }

                //copy
                FileUtils.copyInputStreamToFile(item.getInputStream(), file);

            }
        }
    }
}

四、前端WebUploader上傳完畢觸發uploadSuccess事件

uploader.on('uploadSuccess', function(file) {
            alert(uploader.options.formData.guid);
            alert(Math.ceil(file.size/(5*1024*1024)));
            alert(file.name);
            $('#' + file.id).find('p.state').text('已上傳');
            $.post("UploadSuccessServlet", { "guid": uploader.options.formData.guid,chunks:Math.ceil(file.size/(5*1024*1024)),fileName:file.name},
               function(data){

            }, "json");
        });

請求servlet去合併之前的guid資料夾下的分片檔案，post請求中的分片數量可以用來校驗，獲取的分片是否正確，也可以前端傳遞md5,後臺校驗；

五、後臺獲取的log

這裡寫圖片描述

圖：上傳的GUID命名的資料夾

圖:資料夾下的分片檔案
每個分割線包住的地方是一個servlet請求，最後在success 請求的servlet是進行檔案校驗併合並檔案即可；程式碼見下：
六、java檔案合併
程式碼見下：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String path = request.getSession().getServletContext().getRealPath("/upload");

        String guid = request.getParameter("guid");
        int chunks = Integer.parseInt(request.getParameter("chunks"));
        String fileName = request.getParameter("fileName");

        System.out.println("start...!guid="+guid+";chunks="+chunks+";fileName="+fileName);
        /**
         * 進行檔案合併
         */
        File file = new File(path+"/"+guid);
        /**
         * 判斷分片數量是否正確
         */
        if(file.list().length != chunks){
            return;
        }

        new File("F://upload"+"/"+guid).mkdir();
        /**
         * 進行檔案合併
         */
        File newFile = new File("F://upload"+"/"+guid+"/"+fileName);
        FileOutputStream outputStream = new FileOutputStream(newFile, true);//檔案追加寫入

        byte[] byt = new byte[10*1024*1024];
        int len;
        FileInputStream temp = null;//分片檔案
        for(int i = 0 ; i<chunks ; i++){
            temp = new FileInputStream(new File(path+"/"+guid+"/"+i));
            while((len = temp.read(byt))!=-1){
                System.out.println(len);
                outputStream.write(byt, 0, len);
            }
            temp.close();
        }
        /**
         * 當所有追加寫入都寫完  才可以關閉流
         */
        outputStream.close();
        //temp.close(); 寫錯了 移到for迴圈
        System.out.println("success!guid="+guid+";chunks="+chunks+";fileName="+fileName);
    }

資料夾以guid命名，資料庫儲存guid的名字，後期資料移動，只需要更改前端顯示的路徑；
在這裡up遇到一個問題，上傳報錯：IOException:磁碟空間不足；然而我上傳的磁碟還有20G；原因是系統盤空間不足；up重灌系統就好了；

注：
1、進度條的顯示就很容易了
引入bootstrap的進度條

<div class="progress">
      <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        <span class="sr-only">60% Complete</span>
      </div>
</div>

2.新增uploadProgress事件監聽

uploader.on('uploadProgress', function(file,percentage) {
    $("#progress").css("width",parseInt(percentage*100)+"%");
});

percentage：當前上傳的進度，小數，數值為1是上傳完畢；
效果如下：
PS:UI簡陋還請見諒！

QQ：346640094 Email:[email protected];

前段WebUploader；JavaEE大檔案分片上傳接收

前段WebUploader；JavaEE大檔案分片上傳接收

webuploader在springMVC+jquery+Java開發環境下的大檔案分片上傳

在瀏覽器進行大檔案分片上傳（java服務端實現）

PHP大檔案分片上傳的實現方法

網頁內實現大檔案分片上傳、斷點續傳

java springboot 大檔案分片上傳處理

eggJS大檔案分片上傳與合併

php大檔案分片上傳

iOS大檔案分片上傳和斷點續傳

Android 大檔案分片上傳斷點續傳任務管理實現

js實現大檔案分片上傳的方法

Node + js實現大檔案分片上傳基本原理及實踐(一)

nodeJs + js 大檔案分片上傳

.NET Core Web APi大檔案分片上傳研究

WebUploader-----大檔案列表上傳

PHP大檔案分割上傳 PHP分片上傳

大文分片上傳多執行緒上傳檔案（接收端）

【轉】Android-使用Socket進行大檔案斷點上傳續傳

【效能優化的祕密】Hadoop如何將TB級大檔案的上傳效能優化上百倍

【效能優化的祕密】Hadoop如何將TB級大檔案的上傳效能優化上百倍？

前段WebUploader；JavaEE大檔案分片上傳接收

相關推薦