瀏覽器檔案分段斷點上傳-js教程-PHP中文網

首頁

web前端

js教程

瀏覽器檔案分段斷點上傳

php中世界最好的语言

Mar 10, 2018 pm 03:52 PM

firefoxwebkit瀏覽器

這次帶給大家瀏覽器文件分段斷點上傳，瀏覽器文件分段斷點上傳的注意事項有哪些，下面就是實戰案例，一起來看一下。

後端使用Python Flask

前端原理實作:

#1.取得檔案特徵碼
2.截取檔案資訊與對檔案分段
3 .校驗伺服器是否存在同樣特徵碼的沒上傳完的檔案
4.如過有同樣特徵碼檔案取得上傳進度
5.否則進度從0開始
6.循環異步依序上傳分段檔案
7.如果上傳完成提示成功

後端原理實作:

接收request(檔案hash)參數

判斷檔案是否是中斷上傳的

如果存在hash資料夾取得資料夾下檔案段數量傳回給前端
不存在回傳0或空字串5.如果前端傳回上傳的檔案段,則儲存文件段並給文件段標識索引

如果上傳完成合併文件,刪除文件段

html代碼

代碼以單一文件上傳為例,使用hashMe.js取得特徵碼

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="md5.js"></script>
    <script src="hashme.js"></script></head><body>
    <input type="file" onchange="hhh(this.files[0])" />
    <button onclick="uploadCk()">测试</button>
    <script>
        var up_f;//需要上传的信息
        var fileSplitSize = 1024 * 1024 * 2; //以2MB为一个分片
        function hhh(f) {　            if (true) { //假设这是判断文件大小
                var hash = new hashMe(f, function(msg) {
                    up_f = new Object();
                    up_f.hash = msg;
                    up_f.name = f.name;
                    up_f.size = f.size;
                    up_f.shardCount = Math.ceil(f.size / fileSplitSize); //总片数
                    up_f.shard = [];//文件段
                    for (var i = 0; i < up_f.shardCount; i++) {                        var start = i * fileSplitSize;                        var end = Math.min(f.size, start + fileSplitSize);
                        up_f.shard[up_f.shard.length] = f.slice(start, end);//保存分段
                    }
                });
            }
        }        function uploadCk() { //上传前检查 
            $.ajax({                url: "/upload_ck",                type: "get",                data: {                    hash: up_f.hash
                },                success: function(data) {                    if (data != "") {
                        upload(Number(data));//调用上传(索引为服务器存在的文件段索引)
                    } else { 
                        upload(0);//调用上传
                    }
                }
            });
        }        function upload(loadIndex) { //上传
            var form = new FormData();
            form.append("hash", up_f.hash);
            form.append("name", up_f.name);
            form.append("size", up_f.size);
            form.append("shardCount", up_f.shardCount);
            form.append("blob", up_f.shard[loadIndex]);
            form.append("sdIndex", loadIndex);            console.log("sdIndex:" + loadIndex + ",shardCount:" + up_f.shardCount)
            $.ajax({                url: "/upload",                type: "POST",                data: form,                async: true, 
                processData: false, //很重要，告诉jquery不要对form进行处理
                contentType: false, //很重要，指定为false才能形成正确的Content-Type
                success: function(data) {
                    data = Number(data) + 1;                    if (data <= up_f.shardCount) {                        console.log("data:" + data);
                        upload(data);
                    } else {                        console.log("上传完毕");
                    }
                }
            });
        }    </script></body></html>

Python程式碼

為範例寫的Python程式碼有些不規範大家盡量不要模仿我這種寫法(mime下載)

from flask import Flask, url_for,request 
import codecs,re,osimport urllib.parse,mimeimport shutilfrom werkzeug.routing import BaseConverterclass RegexConverter(BaseConverter):
    def init(self, map, *args):
        self.map = map
        self.regex = args[0]
        
app = Flask(name)
mim=mime.types
app.config[&#39;UPLOAD_FOLDER&#39;] = &#39;uploads/&#39;#保存文件位置app.url_map.converters[&#39;regex&#39;] = RegexConverter@app.route(&#39;/<regex(".*"):url>&#39;)def index(url):
    ps=urllib.parse.unquote(url)   
    if ps=="upload":        return upload()    elif ps.split(&#39;?&#39;)[0]=="upload_ck":        if os.path.exists("./"+app.config[&#39;UPLOAD_FOLDER&#39;]+str(request.args.get(&#39;hash&#39;) ) ):            return str(len( os.listdir("./"+app.config[&#39;UPLOAD_FOLDER&#39;]+str(request.args.get(&#39;hash&#39;) )) )-1 )#返回文件段索引
        else:            return ""
    bt=codecs.open(ps,&#39;rb&#39;,"utf-8").read() 
    return  bt, 200, {&#39;Content-Type&#39;: mim[url.split(".")[-1]]}@app.route(&#39;/upload&#39;, methods=[&#39;POST&#39;])def upload():
    hashtxt=request.form[&#39;hash&#39;]
    sPs="./"+app.config[&#39;UPLOAD_FOLDER&#39;]+hashtxt+"/"
    if not os.path.exists(sPs):#文件夹不存在
        os.makedirs(sPs)#创建hash文件夹
    uploaded_files = request.files.getlist("blob")#获取文件流集
    filePs=hashtxt+"/"+request.form[&#39;name&#39;]+".part"+request.form[&#39;sdIndex&#39;] #文件段保存路径
    for file in uploaded_files:  
        file.save(os.path.join(app.config[&#39;UPLOAD_FOLDER&#39;],filePs ))#保存文件
    if (int(request.form[&#39;shardCount&#39;]))==(int(request.form[&#39;sdIndex&#39;])):#判断上传完最后一个文件
        mergeFile(app.config[&#39;UPLOAD_FOLDER&#39;],request.form[&#39;name&#39;],hashtxt);#合并文件
        shutil.rmtree("./"+app.config[&#39;UPLOAD_FOLDER&#39;]+hashtxt)#删除
    return request.form[&#39;sdIndex&#39;]#返回段索引
 
        def mergeFile(ps,nm,hs):#合并文件
    temp = open(ps+"/"+nm,&#39;wb&#39;)#创建新文件
    count=len(os.listdir(ps+"/"+hs))    for i in range(0,count):  
        fp = open(ps+"/"+hs+"/"+nm+".part"+str(i), &#39;rb&#39;)#以二进制读取分割文件
        temp.write(fp.read())#写入读取数据
        fp.close()  
    temp.close()with app.test_request_context():    #输出url
    passif name == &#39;main&#39;: 
    app.debug = True
    app.run()

範例就這麼多,但實際問題上沒那麼簡單,比如上傳校驗前可以先獲取伺服器中已經存在的同一特徵碼和大小的文件,然後直接複製文件到上傳的目錄或提示是否覆蓋等等。當然你還可以優化例如上傳分段後再上傳時在進行分片然後對片執行同時上傳之類的。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

用nodejs做簡介的網站

ES6物件的賦值與Symbol

如何在行動端做出1px邊框的效果

以上是瀏覽器檔案分段斷點上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles