小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

Webuploader 大文件分片上傳

 ThinkTank_引擎 2016-01-16

  前陣子要做個(gè)大文件上傳的功能,找來找去發(fā)現(xiàn)Webuploader還不錯(cuò),關(guān)于她的介紹我就不再贅述。

  動(dòng)手前,在園子里找到了一篇不錯(cuò)的分片上傳的帖子,參考之后,踏出了第一步。此文記錄我這次實(shí)踐的點(diǎn)滴,僅作分享與討論。

  

  關(guān)于插件的使用可以參考快速使用文檔。在Github上下載了最新的壓縮包后,基于其中的一個(gè)例子(image-upload)做了修改,主要是補(bǔ)充了.net后臺(tái)分片接收文件的實(shí)現(xiàn)。

  先上干貨:WebUploadTest.zip  提取碼:fikn

  

   分片上傳的上傳邏輯已經(jīng)有控件實(shí)現(xiàn)。保存分片的邏輯是:

每次上傳文件,用js生成一個(gè)guid。請(qǐng)看upload.js 87行

GUID = WebUploader.Base.guid()

webuploader配置參數(shù)時(shí)會(huì)用到上面的guid。上傳并發(fā)數(shù)自己改吧,>1經(jīng)過測試貌似也可以(我一開始用其他代碼測試時(shí)>1有報(bào)錯(cuò)過,如有出錯(cuò)留作討論)

后臺(tái)根據(jù)前端的guid,生成一個(gè)臨時(shí)文件夾,文件夾的用guid的值命名。然后分片文件以當(dāng)前分片序數(shù)命名,保存在臨時(shí)文件夾。fileupload.ashx 24行

 

復(fù)制代碼
復(fù)制代碼

//取得chunk和chunks
int chunk = Convert.ToInt32(context.Request.Form["chunk"]);//當(dāng)前分片在上傳分片中的順序(從0開始)
int chunks = Convert.ToInt32(context.Request.Form["chunks"]);//總分片數(shù)
//根據(jù)GUID創(chuàng)建用該GUID命名的臨時(shí)文件夾
string folder = context.Server.MapPath("~/1/" + context.Request["guid"]+"/");
string path = folder + chunk;//每個(gè)分片用數(shù)字命名

復(fù)制代碼
復(fù)制代碼

后臺(tái)每次返回一個(gè)json字符串。關(guān)于這個(gè)返回值是可以像構(gòu)造ajax返回參數(shù)一樣自定義的。我是這樣返回與接收的。請(qǐng)看fileupload.ashx 57行起

復(fù)制代碼
復(fù)制代碼
             //...
         context.Response.Write("{\"chunked\" : true, \"hasError\" : false, \"f_ext\" : \"" + Path.GetExtension(file.FileName) + "\"}"); } else//沒有分片直接保存 { context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + DateTime.Now.ToFileTime() + Path.GetExtension(context.Request.Files[0].FileName))); context.Response.Write("{\"chunked\" : false, \"hasError\" : false}"); }
        //...
復(fù)制代碼
復(fù)制代碼

接收的js如下:upload.js 544行

復(fù)制代碼
復(fù)制代碼
        // 文件上傳成功,合并文件。
        uploader.on('uploadSuccess', function (file, response) {
            if (response.chunked) {
                $.post("MergeFiles.ashx", { guid: GUID, fileExt: response.f_ext },
                function (data) {
                    data = $.parseJSON(data);
                    if (data.hasError) {
                        alert('文件合并失敗!');
                    } else {
                        alert(decodeURIComponent(data.savePath));
                    }
                });
            }
        });
復(fù)制代碼
復(fù)制代碼

由于上傳時(shí),文件分片保存于以guid的值命名的文件夾中,所有,在單個(gè)文件全部上傳完畢之后,再發(fā)送一個(gè)異步請(qǐng)求到 MergeFiles.ashx 合并文件,合并是將臨時(shí)文件夾里的文件按文件名順序合并(文件名是數(shù)字)。

 

運(yùn)行本代碼,在瀏覽器控制臺(tái)可以觀察插件上傳文件的各個(gè)事件。

 

webuploader支持?jǐn)帱c(diǎn)續(xù)傳,但是由于官網(wǎng)例子的原因,我這個(gè)例子上的斷點(diǎn)是不能停止的,這里容我把樂趣留給大家。webuploader官網(wǎng)api有答案,改起來挺簡單的。呵呵

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多