1. <strong id="d2o2m"><address id="d2o2m"><rp id="d2o2m"></rp></address></strong>

    <acronym id="d2o2m"></acronym>
    <acronym id="d2o2m"><sup id="d2o2m"><nav id="d2o2m"></nav></sup></acronym>
    <optgroup id="d2o2m"><em id="d2o2m"><del id="d2o2m"></del></em></optgroup>
    <ol id="d2o2m"></ol>
  2. webuploader上傳大文件

    時間:2021-04-14 18:04:01 類型:PHP
    字號:    

    大文件上傳, 在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. 實例效果圖

       1.jpg

    黄片基地 <