文件/大文件上傳功能實現（JS+PHP）全過程

来源:https://www.cnblogs.com/morningclock/archive/2019/10/14/11670969.html
-Advertisement-
Play Games

文件/大文件上傳功能實現（JS+PHP） 參考博文：掘金-橙紅年代 前端大文件上傳 路漫漫 其修遠 PHP + JS 實現大文件分割上傳 本文是學習文件上傳後的學習總結文章，從無到有實現文件上傳功能，前端小白寫的代碼不是最優，如果有錯誤的地方請多多指教，如果本文對你有所幫助，深感榮幸。 近期公司的項 ...


文件/大文件上傳功能實現（JS+PHP）

 

參考博文：掘金-橙紅年代 前端大文件上傳

路漫漫 其修遠 PHP + JS 實現大文件分割上傳

本文是學習文件上傳後的學習總結文章，從無到有實現文件上傳功能，前端小白寫的代碼不是最優，如果有錯誤的地方請多多指教，如果本文對你有所幫助，深感榮幸。

 

近期公司的項目中，涉及到上傳大文件的問題，大文件上傳用普通表單上傳時出現的問題是，無法斷點續存，一但中途中斷上傳，就要重頭開始，這很明顯不是我們想要的，所以經過一番查詢，學習了一下大文件分割上傳的方法。並且使用簡單的php做服務端處理程式實現一個功能demo，供以後回顧使用。本人也是初出茅廬的前端小白，記錄下各種功能的實現總結，代碼有錯誤的地方，請多多指正。

 

1.簡單文件上傳

  • 普通表單上傳

    表單上傳是我們經常使用的功能，而且使用起來也是非常簡單，我們只需要聲明表單內容類型為enctype="multipart/form-data",表明表單上傳文件的二進位數據。

     <form action="index.php" method="post" enctype="multipart/form-data">
       <input type="file" name="myfile" />
       <input type="submit" value="上傳" />
     </form>

    點擊上傳按鈕，就可以將表單發送到伺服器，並使用index.php接受到對應的表單數據，存入$_GET/$_POST超級全局變數中，我們只需要使用move_uploaded_file方法，將接收到的文件數據，存儲起來，就實現了文件上傳功能了。

     $myfile = $_FILES['myfile'];
     //上傳路徑
     $path = "upload/" . $myfile['name']; 
     if(move_uploaded_file($myfile['tmp_name'], $path)){
       echo "上傳成功";
     } else{
       echo "上傳失敗";
     };

  • ajax模擬表單上傳文件

    當我們有需求，需要非同步提交表單或者需要對上傳文件做一定修改（例如：裁剪尺寸）時，普通的表單上傳就不能滿足我們的需求，因為我們無法修改表單的file值，這時候就需要ajax出場了。這裡我們使用jQuery使用ajax更方便快捷。

    我們需要做如下修改：

    • HTML

      我們不需要配置form，只需要配置相應的ID，用於獲取DOM元素對象。

       <form id="myForm">
         <input type="file" name="myfile" id="myFile" />
         <input type="submit" value="上傳" id="submitForm"/>
       </form>
       <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    • JQuery

      註意，jQuery的ajax方法，會預設配置一些請求信息，所以我們需要重新配置放置jQuery的預設行為導致數據格式或請求頭信息出現問題。

      這裡的contentType和processData為必須項。

       $('#submitForm').on('click', function(e){
         // 阻止預設表單提交
         e.preventDefault();
       ​
         // 創建表單
         // 預設配置了enctype="multipart/form-data"
         var formData = new FormData();
         formData.append('myfile',$('#myFile')[0].files[0])
       ​
         // 提交表單
         $.ajax({
           type: "POST",
           url: 'post.php',
           data: formData,
           // 阻止jquery賦予預設屬性，使用FormData預設配置enctype="multipart/form-data"
           contentType: false,
           // 阻止jquery自動序列化數據
           processData: false,
           success: function(data){
             console.log('請求正常',data);
           }
         })
       })

       

2.大文件分割上傳

  • 簡單上傳痛點

    簡單上傳，使用表單提交文件到伺服器時，如果網路不好或者中途中斷，會使文件上傳失敗，試想一下如果要上傳文件很大，當你上傳到99%時，突然間中斷，又要重新上傳，那該有多崩潰，那時你可能電腦的想砸了。

     

  • 實現思路

    大文件上傳，實現的方法，就是將上傳文件的二進位文件通過分割的形式，逐個上傳到伺服器，在上傳完成後，伺服器再對文件進行拼接操作。

    為了能識別上傳的數據，是哪個文件，我們必須要擁有一個文件標識符，用於識別接收到的文件數據是屬於哪個文件的，以及可以實現避免重覆上傳，實現秒傳功能等。

    不要忘記由於是非同步操作，而且操作的數據段大小不一，會導致整合時無法確認拼接熟悉怒，所以我們需要一個index標識數據段的位置。

    通過初步整理，我們就需要以下的參數

    1. 文件唯一標識符

    2. 分割後數據段

    3. 分割數據段的順序索引值

    經過思考，我們可以建立兩個處理程式，來分別處理接受chunk數據段和合併chunk數據段。

    1. file_getchunk.php

      功能：將分割chunk數據，整理並保存，此處我們用文件形式實現。

    2. file_integration.php

      功能：接收到整合通知，將數據段拼接，並生成文件。

    整體流程大致如圖：

  • PHP.ini配置

    由於PHP預設配合中，限制了POST與上傳的大小，所以我們為了測試，需要修改php.ini中的預設配置。

     post_max_size = 50M
     upload_max_filesize = 50M

     

  • talk is cheap,show me the code

    • HTML

       <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
       <form id="myForm">
         <input type="file" name="myfile" id="myFile" />
         <input type="submit" value="上傳" id="submitForm"/>
       </form>

    • JQuery

      獲取文件對象，文件標識符，分割文件，通過ajax發送切割好的blob數據段。

       $('#submitForm').on('click', function(e){
         // 阻止預設表單提交
         e.preventDefault();
         var myfile = $('#myFile')[0].files[0];
         // 定義文件標識符  
         var fileId = getFileIdentifier(myfile);
         // 數據切片
         var chunks = fileSlice(myfile);
         // 發送分割數據段
       sendChunk(fileId, chunks);
       })
     ​

  • 生成文件唯一標識getFileIdentifier()

    此處可以使用md5，生成文件唯一的md5（相同文件md5相同），作為標識符。這裡只初略的處理了一下文件標識。

       function getFileIdentifier(file){
         // 獲取文件標識符
         return file.size + file.name;
       }

     

    • 分割方法fileSlice()

      先將文件使用blob文件繼承的方法slice進行切割，生成blob字串。

        function fileSlice(file, chunkSize = 1024*1024*0.2){
          // 1.初始化數據
          var totalSize = file.size;
        var start = 0;
          var end = start + chunkSize;
          var chunks = [];
          // 2.使用bolb提供的slice方法切片
          while(start < totalSize){
            var chunk = file.slice(start, end);
            chunks.push(chunk);
            start = end;
            end += chunkSize;
          }
          // 3.返回切片組chunk[]
          return chunks;
        }

    • 發送chunk方法sendChunk()

      使用ajax依次發送已經分割好的chunk，並提供對應的數據，請求file_getchunk.php進行處理。此處task列表，用於保證文件分隔符全部已經完成上傳。

       function sendChunk(id, chunks){
         // 逐個提交
         // 用於保證ajax發送完畢
         var task = [];
       ​
         chunks.forEach(function(chunk, index){
           var formData = new FormData();
           formData.append('fileId', id);
           formData.append('myFileChunk', chunk);
           formData.append('chunkIndex', index);
           $.ajax({
             type: "POST",
             url: 'file_getchunk.php',
             data: formData,
             contentType: false,
             processData: false,
             success: function(done){
               // 移除已完成任務
               task.pop();
               console.log(done,' 已完成');
               if (task.length === 0) {
                 // 發送完畢，整合文件
                 console.log('通知整合');
                 makeFileIntegration(id, chunks.length);
               }
             }
           })
           task.push('file Working');
         })
       }

    • 通知整合方法makeFileIntegration()

      接收到整合通知，請求file_integration.php進行文件的整合處理。

       function makeFileIntegration(id, size){
         // 通知已傳輸完成
         $.post(
           "file_integration.php",
           {
             id: id,
             size: size
           },
           function(data){
             console.log(data);
           }
         );
       }

    • PHP- file_getchunk.php

      當PHP監聽到請求時，獲取對應的數據，生成文件夾，按照chunkIndex存儲數據段。

       if(!is_dir('upload')){
         mkdir('upload', 0777);
       }
       ​
       $chunk = $_FILES['myFileChunk'];
       // 文件唯一標識
       $fileId = $_POST['fileId'];
       // 臨時文件夾名稱
       $length = strlen($fileId) - (strlen($fileId) - strpos($fileId, '.'));
       $filedir = substr($fileId, 0, $length);
       ​
       $chunkIndex = $_POST['chunkIndex'];
       ​
       $filepath = 'upload/' . $filedir;
       ​
       $filename = $filepath . '/' . $chunkIndex;
       ​
       if(!is_dir($filepath)){
         mkdir($filepath, 0777);
       }
       move_uploaded_file($chunk['tmp_name'], $filename);
       ​
       echo $chunkIndex;

    • PHP-file_integration.php

      監聽到整合請求，對文件夾下麵的所有文件，進行依次拼接，並生成最終還原出來的文件。

       $fileId = $_POST['id'];
       // 臨時文件夾名稱
       $length = strlen($fileId) - (strlen($fileId) - strpos($fileId, '.'));
       $filedir = substr($fileId, 0, $length);
       ​
       $size = $_POST['size'];
       $file = './upload/' . $fileId;
       ​
       // 創建最終文件
       if(!file_exists($file)){
         // 最終文件不存在，創建文件
         $myfile = fopen($file, 'w+');
         fclose($myfile);
       } 
       // 用增加方式打開最終文件
       $myfile = fopen($file, 'a');
       ​
       for ($i = 0; $i < $size; $i++) {
         // 單文件路徑
         $filePart = 'upload/' . $filedir . '/' . $i;
       ​
         if(file_exists($filePart)){
           $chunk = file_get_contents($filePart);
           // 寫入chunk
           fwrite($myfile, $chunk);
         } else{
           echo "缺少Part$i 文件，請重新上傳";
           break;
         }
       }
       ​
       fclose($myfile);
       echo "整合完成";
       ​

     

3.更進一步

大文件分割上傳功能已經基本實現，但是我們還可以擁有很多優化的地方

  • 1.斷點續存。

    我們需要的文件已經可以正常的分割上傳，服務端也可以正常接收切片，完成數據段切片的合併了。此時我們就可以進一步實現斷點續存了。

    斷點續存，實現方法很簡單，我們只需要獲取到上傳完成的數據段切片信息，就可以判斷我們應該從哪個數據段開始繼續傳輸數據。

    獲取已經完成數據段切片的信息，我們可以使用前端保存或者服務端獲取。此處我們使用服務端介面檢測，返回數據缺失位置來實現斷點續存。

    • 思路整理

      我們要在上傳前，請求服務端查詢出中斷時的位置，利用位置信息，篩選上傳的數據段切片。

      那麼我們要增加的邏輯就是：

      1. offset中斷位置信息

      2. 查詢中斷位置介面：file_get_breakpoint.php

    • 實現

      • getFileBreakpoint()獲取文件斷點函數

        此處要保證ajax執行順序，才能正確獲取offset偏移量，實現思路有很多。此處只使用jquery提供的將ajax請求變為同步，進行處理。

        註：同步請求時，success函數返回值不可以直接return，要保存在一個變數中，在ajax請求外return才能生效。

         // 獲取文件斷點
         function getFileBreakpoint(id, size){
           var offset = '';
           $.ajax({
             type:"post",
             url:"file_get_breakpoint.php",
             data: {
               id: id,
               size: size
             },
             async: false,
             success:function(res){
               offset = parseInt(res);
             }
           })
           return offset;
         }

         

      • 在sendChunk()發送數據前獲取offset

         // 上傳前，請求file_integration.php介面獲取數據段開始傳輸的位置
         var offset = getFileBreakpoint(id, chunks.length);

      • 遍歷chunks發送數據段時，增加篩選邏輯

          chunks.forEach(function(chunk, index){
            // ==============新增=================
            // 從offset開始傳輸
            if (index < offset) {
              return;
            }
            // ==============新增=================
            
            var formData = new FormData();
            formData.append('fileId', id);
            formData.append('myFileChunk', chunk);
            formData.append('chunkIndex', index);
            $.ajax({
              type: "POST",
              url: 'file_getchunk.php',
              data: formData,
              contentType: false,
              processData: false,
              success: function(done){
                task.pop();
                console.log(done,' 已完成');
                if (task.length === 0) {
                  console.log('通知整合');
                  makeFileIntegration(id, chunks.length);
                }
              }
            })
            task.push(index+' is Working');
          })

      • 獲取中斷位置介面file_get_breakpoint.php

        這裡使用的獲取中斷位置的邏輯很簡單（不是最優），只需要檢測文件夾是否存在，再依次檢測數據段是否缺失。缺失時返回缺失段的index，已存在返回chunks長度size，不存在時返回0

         // 1.檢測數據文件是否存在(文件標識，數據段總數)
         $fileId = $_POST['id'];
         $size = $_POST['size'];
         // 臨時文件夾名稱
         $length = strlen($fileId) - (strlen($fileId) - strpos($fileId, '.'));
         $filedir = substr($fileId, 0, $length);
         ​
         // 2.按順序檢測缺失的數據段的位置
         // 檢測是否存在文件夾
         if (is_dir("upload/$filedir")) {
           $offset = $size;
           // 檢測數據段缺失下標
           for ($i = 0; $i < $size; $i++) {
             $filepath = "upload/$filedir/$i";
             if(!file_exists($filepath)){
               // 缺失i部分
               $offset = $i;
               break;
             }
           }
           // 輸出偏移量
           echo $offset;
         } 
         else {
           // 是否存在已合併文件
           if(file_exists("upload/$fileId")){
             echo $size;
           } else{
             // 文件尚未上傳
             echo 0;
           }
         }

         

  • 2.文件秒傳

    文件秒傳的概念，按照我的理解，就是在上傳文件請求後，伺服器端檢測資料庫中是否存在相同的文件，如果存在相同的文件，就可以告訴用戶上傳完成了。

    此處在獲取offset後，增加一個判斷就可以實現

     var offset = getFileBreakpoint(id, chunks.length);
     // 增加判斷
     if(chunks.length === offset) {
       console.log('文件已經上傳完成');
       return;
     }

    當然，這裡僅僅是非常簡單的處理，我們還可以使用MD5來作為文件標識符，在在伺服器端使用這個標識符是否存在相同文件。

  • 3.MD5檢測文件完整性。

    通過md5對文件加密，傳輸到伺服器端，伺服器端實現合併後對文件再進行一次md5加密，比對兩串md5字串是否相同，就可以知道文件傳輸過程中是否完整。

  • 3.上傳完成後，存儲數據段文件夾進行刪除操作。

    我們最後做一步就是將臨時文件移除操作，在整合完成後，我們只需要在file_integration.php介面中，整合完成後，移除文件夾及其下麵的所有文件。

     function deldir($path){
        //如果是目錄則繼續
       if(is_dir($path)){
           //掃描一個文件夾內的所有文件夾和文件並返回數組
         $p = scandir($path);
         foreach($p as $val){
           //排除目錄中的.和..
           if($val !="." && $val !=".."){
             //如果是目錄則遞歸子目錄，繼續操作
             if(is_dir($path.$val)){
               //子目錄中操作刪除文件夾和文件
               deldir($path.$val.'/');
               //目錄清空後刪除空文件夾
               @rmdir($path.$val.'/');
             }else{
               //如果是文件直接刪除
               unlink($path.$val);
             }
           }
         }
         // 刪除文件夾
         rmdir($path);
       }
     }
     //刪除臨時文件夾
     deldir("upload/$filedir/");

     

4.總結

　　按照上述步驟，可以跟著實現簡單上傳、大文件分割上傳、斷點續存等知識，起碼下次遇到上傳文件，心裡也有了點底氣。由於本人是前端小白，所以寫的代碼比較簡陋，只是實現了功能，還有許多可以優化的地方，如果代碼有誤，還望指正。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 乾貨！從0開始，0成本搭建個人動態博客
    首發於微信公眾號《前端成長記》，寫於 2019.10.12 導讀 有句老話說的好，好記性不如爛筆頭。人生中，總有那麼些東西你願去執筆寫下。 本文旨在把整個搭建的過程和遇到的問題及解決方案記錄下來，希望能夠給你帶來些許幫助。 本文涉及的主要技術： "Vue3.0 Composition API" "G ...
  • 如何才能通俗易懂的解釋js裡面的‘閉包’？
    看了知乎上的話題 如何才能通俗易懂的解釋javascript裡面的‘閉包’？，受到一些啟發，因此結合實例將回答中幾個精要的答案做一個簡單的分析以便加深理解。 1. "閉包就是跨作用域訪問變數。" 【示例一】 在 getName 函數中獲取 name，首先在 getName 函數的作用域中查找 nam ...
  • Nginx常用命令，解決你日常運維的煩惱
    前面，跟大家簡單地介紹了負載均衡和Nginx的一些基礎配置（ "Nginx負載均衡配置實例" ），接下來，跟大家介紹一下Nginx的常用命令，便於日常的運維。 "查看原文" 停止Nginx的方法 通過之前的學習，大家知道瞭如何配置並啟動Nginx，但如果想停止Nginx服務，該如何操作呢？下麵介紹停 ...
  • Express multer 文件上傳
    npm multer 文件上傳 Express app 範本就不寫了，僅記錄一下上傳部分的代碼。 const fs = require('fs'); const express = require('express'); const multer = require('multer'); const ...
  • webpack 插件 ProvidePlugin 的使用方法和 eslint 配置
    webpack 插件 ProvidePlugin：自動載入模塊，而不必到處 import 或 require 。 ...
  • 前端實現文件下載所有方式
    一.a標簽完成 二.js實現下載 三.js中ajax實現音頻或者視頻不跳轉進行文件下載 寫代碼的思路 四.fetch實現 ...
  • vsCode 前端插件推薦-和插件配置
    參考自網站：https://segmentfault.com/a/1190000011779959 插件安裝完成之後，還要對一些插件進行配置，例如： vetur預設配置， 配置的過程： 打開 文件 > 首選項 > 用戶設置(U) > 點擊右上角 打開設置(json) // 執行文字相關的導航或操作時 ...
  • WEB前端動態背景集
    本資源是我在源代碼網站上發現的，內附幾十種背景動態特效，我單獨提取出來精品背景特效在此分享，文件里有20多種精品動態效果，本人覺得可用作於個人博客主頁背景，登陸頁面背景等，有20多個背景特效，非常漂亮。 附文件下載地址： https://github.com/chengpu2/web2 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類