<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      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

      黄网站免费 <