webuploader上傳大文件

大文件上傳, 在web應該用中是一個常規應用, 然因為服務器配置設置最大上傳大小, 或者上傳時間太久沒有進度條等等, 都會給我們的使用帶來較大的困擾, 這里基于layui進度條+thinkphp6.0+webuploader的實現, 分享給大家一個完整的案例

1, html代碼:

<script type="text/javascript" src="__STATIC__/js/jquery.js"></script>
<!--引入 上傳大文件 用的插件 webuploade 的相關文件-->
<link rel="stylesheet" type="text/css" href="__STATIC__/webuploader/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="__STATIC__/webuploader/webuploader.js"></script>
<div class="layui-form-item">
           <label class="layui-form-label">上傳大文件</label>
           <div class="layui-input-block">
                  <div id="uploader" class="wu-example">
                     <!--用來存放文件信息-->
                     <div id="thelist" class="uploader-list"></div>
                    <div class="btns">
                       <div id="pickerfile" style="float:left;">選擇文件</div>
                       <button id="startup" type="button" class="btn-default layui-btn" style="height: 44px; margin-left:10px; display: none;">開始上傳</button>
                   </div>
                  <table class="layui-table">
                      <thead>
                      <tr>
                          <th>文件名</th>
                          <th>文件大小</th>
                          <th>文件驗證</th>
                          <th style="width: 300px;">進度</th>
                          <th>操作</th>
                      </tr>
                      </thead>
                      <tbody id="fileinfo">
                      </tbody>
                  </table>
                      <div id="infos" style="display:none;">
                      </div>
                 </div>
           </div>
 </div>

2, JS代碼

引入layui

<script src="__LAYUIADMIN__/layui/layui.js"></script>

function formatFileSize(size){
    var fileSize =0;
    if(size/1024>1024){
        var len = size/1024/1024;
        fileSize = len.toFixed(2) +"MB";
    }else if(size/1024/1024>1024){
        var len = size/1024/1024;
        fileSize = len.toFixeds(2)+"GB";
    }else{
        var len = size/1024;
        fileSize = len.toFixed(2)+"KB";
    }
    return fileSize;
}

layui.config({
 base: '__LAYUIADMIN__/' //靜態資源所在路徑
}).extend({
  index: 'lib/index' //主入口模塊
}).use(['index', 'form', 'laydate','upload','element'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,element = layui.element
  ,layer = layui.layer
  ,laydate = layui.laydate
  ,form = layui.form
  ,upload = layui.upload;
  
  var uploader = WebUploader.create({
    // swf文件路徑
    swf: '__STATIC__/webuploader/Uploader.swf',
    // 文件接收服務端。
    server: '{:url("@qile/upload/getBlockFile")}',
    // 選擇文件的按鈕?？蛇x。
    // 內部根據當前運行是創建，可能是input元素，也可能是flash.
    pick: {
        "id":'#pickerfile',
        "multiple":true   //禁止多選。
    },
    chunked: true,           //開啟分片上傳
    chunkSize: 1 * 1024 * 1024,  //每一片的大小
    chunkRetry: 5,         // 如果遇到網絡錯誤,重新上傳次數
    threads: 3,  //上傳并發數。允許同時最大上傳進程數。
    // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！
    resize: false,
    // 選完文件后，是否自動上傳。
    auto: false,
    // 只允許選擇圖片文件。
    // accept: {
    //     title: 'Images',
    //     extensions: 'gif,jpg,jpeg,bmp,png',
    //     mimeTypes: 'image/*'
    // }
});


// 當有文件被添加進隊列的時候
uploader.on('fileQueued', function( file ) {
    $("#startup").hide(); //隱藏開始上傳按鈕 , 待全部檢驗完再顯示
    let size = formatFileSize(file.size);
    //根據文件大小定義id名字

    let progress = "<div class='layui-progress' lay-showPercent=\"yes\">" +
        "<div class='layui-progress-bar' lay-percent=''></div>" +
        "</div>";
    let html = "<tr id='"+ file.id +"'>" +
                    "<td>"+file.name+"</td>" +
                    "<td>"+size+"</td>" +
                    "<td class='md5'></td>" +
                    "<td class='state'>" + progress+ "</td>" +
                    "<td class='do'></td>" +
                "</tr>";
    $("#fileinfo").append(html);
    element.render('progress');
    uploader.md5File(file).progress(function (percentage) {
            // 及時顯示進度
            //console.log("測試進度");
            let v = parseInt(percentage * 100);
            $("#"+file.id).find(".md5").text(v+"%");
        }).then(function (fileMd5) {
            $("#"+file.id).find(".do").text('等待上傳...');
            file.md5 = fileMd5;
            var all_f = uploader.getFiles(); //隊列中的所有的文件
            var nums = uploader.getFiles().length;
            var count = 0;
            for(var i = 0; i < nums; i++){
                if(all_f[i].hasOwnProperty('md5')) count++;
            }
            if(nums == count){
                //當隊列中的每一個文件都有了 md5 屬性時, 開啟文件上傳按鈕
                $("#startup").show();
            }
            //計算大的文件是需要一段時間的

        });
    //file : 代表隊列中的各個文件
});

// 每個分塊發送前檢查,并附加MD5數據
uploader.on('uploadBeforeSend', function(block, data ) {
    data.md5 = block.file.md5;
    //data.status = block.file.status;
});

// 上傳提交
$("#startup").on('click', function() {
    uploader.upload();
});

// 文件上傳過程中創建進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var id = "#" + file.id;
    var value = parseInt(percentage * 100)+"%";
    $(id).find(".layui-progress-bar").attr({"lay-percent":value});
    $(id).find('.do').text('上傳中');
    element.render('progress');
});


/*uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).find('.do').text('已上傳');
});

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

// 上傳完成后觸發
uploader.on('uploadSuccess', function (file,response) {
    $.post('{:url("@qile/upload/merge")}', { md5: file.md5, fileName: file.name }, function (obj) {
        if (obj.status) {
            //將上傳的文件用 input做記錄, 方便提交到數據庫中
            var data  = {md5: file.md5, source_name: file.name, size:file.size,save_name:obj.save_name};
            var str_data = JSON.stringify(data);
            var html = "<input type='text' class='info' name=\"info[]\" _id='"+file.id+"' value='"+str_data+"'>";
            $("#infos").append(html);
            //更新設置 狀態
            var btn = '<button type="button" class="layui-btn layui-btn-sm layui-btn-danger big_del" _id="'+file.id+'" _save_name="'+obj.save_name+'">刪除</button>';
            $("#"+file.id).find(".do").html(btn);
        }
    });
});
//上傳完成
//大文件上傳結束
//刪除
$(document).on("click",".big_del",function(){
    let _this = $(this);
    layer.confirm('確定要刪除嗎?', {icon: 3, title:'提示', title:""}, function(index_alert){
        var _id = _this.attr("_id");
        var data = {files:_this.attr("_save_name")}
        $.post('{:url("@qile/upload/del")}',data);
        _this.parent().parent("tr").remove(); //刪除本行
        $("input[_id='"+_id+"']").remove();     //刪除
        layer.close(index_alert);
    })

})
//刪除結束
});

3, 控制器接收文件

class UploadController
{
    
    //接收大文件分開塊狀文件
    public function getBlockFile(){
        set_time_limit(0);
        // 建立臨時目錄存放文件-以MD5為唯一標識
        $post = request()->post();

        $dir = str_replace("\\","/",public_path()) . "static/upload/" . $post["md5"];
        if (!file_exists($dir)) {
            mkdirs($dir,0777);
        }
        // 移動每一塊文件到 唯一 標識文件夾下
        if($post["size"] >= 1 * 1024 * 1024){
            move_uploaded_file($_FILES["file"]["tmp_name"], $dir.'/'.$post["chunk"]);
        }
        else{
            //文件 小于 設置的 chunk 大小 時,沒有chunk
            $file = $_FILES["file"];
            move_uploaded_file($_FILES["file"]["tmp_name"], $dir.'/'.$file["name"]);
        }

    }
    //合成分塊上傳的文件
    public function merge(){
        set_time_limit(0);
        // 接收相關數據
        $post = $_POST;
        $path = str_replace("\\","/",public_path()) . "static/upload/";
        // 找出分片文件
        $dir = $path . $post["md5"];
        // 獲取分片文件內容
        $block_info = scandir($dir);
        // 除去無用文件
        foreach ($block_info as $key => $block) {
            if ($block == '.' || $block == '..') unset($block_info[$key]);
        }
        // 數組按照正常規則排序
        natsort($block_info);
        // 定義保存文件
        $save_path = date("Ymd").'/';
        $target_path  = $path . $save_path;
        if(!is_dir($target_path)) mkdirs($target_path);
        $new_file_name = date('Ymdgis').rand().".".getSuffix($post['fileName']);
        $save_file = $target_path . $new_file_name;
        $save_name = $save_path . $new_file_name;
        // 沒有？建立
        if (!file_exists($save_file)) fopen($save_file, "w");
        // 開始寫入
        $out = @fopen($save_file, "wb");
        // 增加文件鎖
        if (flock($out, LOCK_EX)) {
            foreach ($block_info as $b) {
                // 讀取文件
                if (!$in = @fopen($dir.'/'.$b, "rb")) {
                    break;
                }

                // 寫入文件
                while ($buff = fread($in, 4096)) {
                    fwrite($out, $buff);
                }

                @fclose($in);
                @unlink($dir.'/'.$b);
            }
            flock($out, LOCK_UN);
        }
        @fclose($out);
        @rmdir($dir);
        return json(["save_name" => $save_name, "status" => 1]);
    }

    //刪除提交的文件
    public function del(){
        $files = request()->post("files");
        if($files){
            $path = str_replace("\\","/",public_path()) . "static/upload/";
            if(file_exists($path.$files)){
                unlink($path.$files);
            }
        }
    }
}

4. 實例效果圖