基於php大文件分片上傳至七牛雲,支持斷點續傳,,帶進度條

来源:https://www.cnblogs.com/zxf100/archive/2023/02/03/17089774.html
-Advertisement-
Play Games

基於php大文件分片上傳至七牛雲,使用的是七牛雲js-sdk V2版本,引入js文件,配置簡單,可以暫停,暫停後支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況),可以配置分片大小和分片數量,官方文檔https://developer.qiniu.com/kodo/6889/javascrip ...


基於php大文件分片上傳至七牛雲,使用的是七牛雲js-sdk V2版本,引入js文件,配置簡單,可以暫停,暫停後支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況),可以配置分片大小和分片數量,官方文檔https://developer.qiniu.com/kodo/6889/javascript-sdk-historical-document-2-xtoken需要從後端獲取。如果不使用七牛雲可參看基於php+webuploader的大文件分片上傳,帶進度條

前端

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>分片上傳七牛雲</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data">

        <br/>
        <!-- 選擇文件按鈕 -->
        <input id="input-file" class="upload" type="file" value="" onchange="upFile(this)">
         <br/><br/>

        <!-- 進度條 -->
         <div id="totalBar" style="float:left;width:20%;height:20px;border:1px solid;border-radius:3px">
            <div id="totalBarColor" style="width:0%;border:0;background:#00b7ee; color: #FFF;height:20px;"></div>
            <span class="speed"></span>
         </div>
 
         <br/>
         <BR/>
         文件名:<input type="text" name="key">
         <br/>
         <BR/>
      <input type="button" value="上傳" onclick="upload()"/>
      <input type="button" value="暫停" onclick="filepause()"/>
    </form>
    <!-- 引入js -->
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/qiniu.min.js"></script>
 
    <script>
        var subObject;
       var file;
       //定義上傳配置  大於 4M 時可分塊上傳,小於 4M 時直傳
       var config = {
            useCdnDomain: true,     //是否使用 cdn 加速功能變數名稱
            region: qiniu.region.z1,    //上傳功能變數名稱區域 華東空間z0,華南z2,華北z1
            retryCount: 6,      //上傳自動重試次數  預設3次
        };

       //定義putExtra上傳限制
       var putExtra = {
            fname: "",  //文件原始文件名
            params: { 'x:flag': 'qiniu'},    //自定義變數
            // mimeType: ["mp4"]     //指定所傳的文件類型
        };

        var compareChunks = [];
        var observable;
        var subscription;

        function upFile(node) {
            var fileURL = "";
            try{
                file = null;
                if(node.files && node.files[0] ){
                    file = node.files[0];
                }else if(node.files && node.files.item(0)) {
                    file = node.files.item(0);
                }
            }catch(e){

            }
            creatFile(fileURL,file.name);
            return fileURL;
        }

        // 文件名
        function creatFile(fileURL,fileName){
            $("input[name=key]").val(fileName);
            $("#totalBarColor").css("width","0%");
        }

        // 上傳操作
      function upload() {
            // 設置next,error,complete對應的操作,分別處理相應的進度信息,錯誤信息,以及完成後的操作
            subObject = {
                  next: next,
                  error: error,
                  complete: complete
            };
            token = "**************";  //需要從後端獲取
            //上傳
            observable = qiniu.upload(file, file.name, token, putExtra, config);
            // 調用sdk上傳介面獲得相應的observable,控制上傳和暫停
            subscription = observable.subscribe(subObject);
        }

        // 暫停操作
        function filepause(){
           subscription.unsubscribe();
        }

        //分片上傳返回response,標記上傳進度  
        var next = function(response) {
           var chunks = response.chunks||[];
           var total = response.total;
           $(".speed").text("進度:" + Math.floor(total.percent) + "% ");  //進度向下取整
           $("#totalBarColor").css("width", total.percent + "%");
           compareChunks = chunks;
         };
        // 錯誤信息
         var error = function(err) {
               alert(err.message);
         };
         // 上傳完成
         var complete = function(res) {
            // 返迴文件信息
             console.log(res);
             console.log(res.key);

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

後端:獲取token


use Qiniu\Auth as Auth;
use Qiniu\Storage\BucketManager;
use Qiniu\Storage\UploadManager;

function getToken()
{
  vendor('qiniu.autoload');
  $accessKey = '***';
  $secretKey = '***';
  $bucket = '***';

  $expires = 7200;

  // 構建鑒權對象
  $auth = new Auth($accessKey, $secretKey);

  $token = $auth->uploadToken($bucket,null,$expires, null, true);
  return $token;
}

 

——現在的努力,只為小時候吹過的牛逼! ——
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Python有哪些關鍵字 Python常用的關鍵字 and, del, from, not, while, as, elif, global, or, with, assert, else, if, pass, yield, break, except, import, print, class, ...
  • 前言 前面我們已經學習了Python的基礎語法,瞭解了Python的分支結構,也就是選擇結構、迴圈結構以及函數這些具體的框架,還學習了列表、元組、字典、字元串這些Python中特有的數據結構,還用這些語法完成了一個簡單的名片管理系統。下麵我就將介紹一下Python的一些進階語法規則,為後面更複雜的編 ...
  • Map 介面與 Collection 併列存在的,用於保存具有映射關係的數據:key-value 被稱為 鍵值對 。Java集合可分為 Collection 和 Map 兩種體系。Map 中的 key 和 value 都可以是任何引用類型的數據。Map 中的 key 用 Set 集合存儲的,不允許... ...
  • 鋼鐵知識庫,一個學習python爬蟲、數據分析的知識庫。人生苦短,快用python。 使用pycharm創建python文件時候,有時候需要自動生成想要的文件頭,如何生成呢? 只需要以下幾步: 在file->settings中搜索temp,找到file and code templates->pyt ...
  • Java集合框架 每博一文案 《殺死一隻知更鳥》中有這樣一段話:“你永遠不可能真正地瞭解一個人,除非你穿上他的鞋子走來走去,站在他的角度思考問題。 可真當你走過他的路時,你連路過都覺得難過。” 世上沒有真正的感同身受,也永遠不會有一模一樣的境遇。 很多時候,你以為看到了全貌,但其實只有冰山一角。永遠 ...
  • 最大公約數演算法不是很無聊,計算最大公約數是數學中一個重要的概念,可以用於判斷兩個數是否互質、求分數的約分等,在很多領域都有廣泛的應用。具體如下: 判斷兩個數是否互質:兩個數的最大公約數為1,說明這兩個數是互質的。 求分數的約分:將分子和分母的最大公約數約分掉,使得分數的值不變。 求同餘方程的最小正整 ...
  • 聲明 本文章中所有內容僅供學習交流,抓包內容、敏感網址、數據介面均已做脫敏處理,嚴禁用於商業用途和非法用途,否則由此產生的一切後果均與作者無關,若有侵權,請聯繫我立即刪除! 本文章未經許可禁止轉載,禁止任何修改後二次傳播,擅自使用本文講解的技術而導致的任何意外,作者均不負責,若有侵權,請在公眾號【K ...
  • BP(Back Propagation)演算法是一種常用的神經網路訓練演算法,主要用於識別分類和預測。常用於圖像識別、語音識別、文本分類等場景。它的原理是通過對誤差進行反向傳播來更新網路的參數,使得模型的誤差最小。BP演算法最早於1986年由Rumelhart等人提出。BP演算法適用於處理非線性問題,並且不 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...