前陣子要做個(gè)大文件上傳的功能,找來(lái)找去發(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)過(guò)測(cè)試貌似也可以(我一開(kāi)始用其他代碼測(cè)試時(shí)>1有報(bào)錯(cuò)過(guò),如有出錯(cuò)留作討論) 后臺(tái)根據(jù)前端的guid,生成一個(gè)臨時(shí)文件夾,文件夾的用guid的值命名。然后分片文件以當(dāng)前分片序數(shù)命名,保存在臨時(shí)文件夾。fileupload.ashx 24行
//取得chunk和chunks 后臺(tái)每次返回一個(gè)json字符串。關(guān)于這個(gè)返回值是可以像構(gòu)造ajax返回參數(shù)一樣自定義的。我是這樣返回與接收的。請(qǐng)看fileupload.ashx 57行起 //... 接收的js如下:upload.js 544行 // 文件上傳成功,合并文件。 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)); } }); } }); 由于上傳時(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)是不能停止的,這里容我把樂(lè)趣留給大家。webuploader官網(wǎng)api有答案,改起來(lái)挺簡(jiǎn)單的。呵呵
|
|
來(lái)自: ThinkTank_引擎 > 《上傳下載》