jQuery webuploader分片上傳大文件
一般在做文件上傳的時(shí)候,都是通過客戶端把要上傳的文件上傳到服務(wù)器,此時(shí)上傳的文件都在服務(wù)器內(nèi)存,如果上傳的是視頻等大文件,那么服務(wù)器內(nèi)存就很緊張,而且一般我們都是用flash或者h(yuǎn)tml5做異步上傳,如果文件比較大的話,即便是客戶端顯示文件已經(jīng)上傳了100%,還是會(huì)有一個(gè)比較長時(shí)間的等待,而且當(dāng)前頁面對服務(wù)器的請求也會(huì)被阻塞。
正常情況下,一般都是在長傳完成后,在服務(wù)器直接保存。
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//保存文件
context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName));
context.Response.Write("Hello World");
}
最近項(xiàng)目中用百度開源的上傳組件webuploader,官方介紹webuploader支持分片上傳。具體webuploader的使用方法見官網(wǎng)http://fex.baidu.com/webuploader/。
var uploader = WebUploader.create({
auto: true,
swf:'/webuploader/Uploader.swf',
// 文件接收服務(wù)端。
server: '/Uploader.ashx',
// 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建,可能是input元素,也可能是flash.
pick: '#filePicker',
chunked: true,//開啟分片上傳
threads: 1,//上傳并發(fā)數(shù)
//由于Http的無狀態(tài)特征,在往服務(wù)器發(fā)送數(shù)據(jù)過程傳遞一個(gè)進(jìn)入當(dāng)前頁面是生成的GUID作為標(biāo)示
formData: {guid:"<%=Guid.NewGuid().ToString()%>"}
});
webuploader的分片上傳是把文件分成若干份,然后向你定義的文件接收端post數(shù)據(jù),如果上傳的文件大于分片的尺寸,就會(huì)進(jìn)行分片,然后會(huì)在post的數(shù)據(jù)中添加兩個(gè)form元素chunk和chunks,前者標(biāo)示當(dāng)前分片在上傳分片中的順序(從0開始),后者代表總分片數(shù)。
選擇一個(gè)文件后分了7個(gè)分片,所以對Uploader.ashx進(jìn)行了7次post數(shù)據(jù)的過程。

每次請求中的form元素chunk和chunks以及為了標(biāo)示是同一個(gè)文件的分片的GUID

在服務(wù)器端接收到數(shù)據(jù)后,就可以根據(jù)這些參數(shù)進(jìn)行處理了。
1、按按GUID創(chuàng)建一個(gè)臨時(shí)文件
2、把收到的分片數(shù)據(jù)追加到對應(yīng)GUID的文件中。
3、根據(jù)上傳的文件名重命名臨時(shí)文件
4、如果沒有分片直接保存
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//如果進(jìn)行了分片
if (context.Request.Form.AllKeys.Any(m => m == "chunk"))
{
//取得chunk和chunks
int chunk =Convert.ToInt32(context.Request.Form["chunk"]);
int chunks = Convert.ToInt32(context.Request.Form["chunks"]);
//根據(jù)GUID創(chuàng)建用該GUID命名的臨時(shí)文件
string path = context.Server.MapPath("~/1/" + context.Request["guid"]);
FileStream addFile = new FileStream(path, FileMode.Append, FileAccess.Write);
BinaryWriter AddWriter = new BinaryWriter(addFile);
//獲得上傳的分片數(shù)據(jù)流
HttpPostedFile file = context.Request.Files[0];
Stream stream = file.InputStream;
BinaryReader TempReader = new BinaryReader(stream);
//將上傳的分片追加到臨時(shí)文件末尾
AddWriter.Write(TempReader.ReadBytes((int)stream.Length));
//關(guān)閉BinaryReader文件閱讀器
TempReader.Close();
stream.Close();
AddWriter.Close();
addFile.Close();
TempReader.Dispose();
stream.Dispose();
AddWriter.Dispose();
addFile.Dispose();
//如果是最后一個(gè)分片,則重命名臨時(shí)文件為上傳的文件名
if (chunk == (chunks - 1))
{
FileInfo fileinfo = new FileInfo(path);
fileinfo.MoveTo(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName));
}
}
else//沒有分片直接保存
{
context.Request.Files[0].SaveAs(context.Server.MapPath("~/1/" + context.Request.Files[0].FileName ));
}
context.Response.Write("ok");
}
還存在一些問題沒解決,雖然暫時(shí)滿足需求:
1、如果上傳并發(fā)超過1個(gè)的時(shí)候,就會(huì)出現(xiàn)一個(gè)分片上傳服務(wù)器還沒處理結(jié)束,第二個(gè)分片同時(shí)就到了,那樣就會(huì)出現(xiàn)文件被占用的錯(cuò)誤。
2、如果加鎖的辦法解決第一個(gè)問題,那加鎖了就肯定會(huì)影響效率(同時(shí)只有一個(gè)進(jìn)程能訪問保存文件那段代碼)。
3、文件的順序問題,有個(gè)可能是第二個(gè)分片先到,然后第一個(gè)才到,那么就不能一次追加流到臨時(shí)文件了,只能創(chuàng)建多個(gè)臨時(shí)文件,待所有分片上傳完成后,拼接成一個(gè)文件。
只是個(gè)Demo,希望有人幫助解決下存在的問題。
更多精彩內(nèi)容,請點(diǎn)擊《jQuery上傳操作匯總》,進(jìn)行深入學(xué)習(xí)和研究。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery組件WebUploader文件上傳用法詳解
- Java中使用WebUploader插件上傳大文件單文件和多文件的方法小結(jié)
- Java與WebUploader相結(jié)合實(shí)現(xiàn)文件上傳功能(實(shí)例代碼)
- JavaScript中使用webuploader實(shí)現(xiàn)上傳視頻功能(demo)
- vue webuploader 文件上傳組件開發(fā)
- Android 開發(fā) 使用WebUploader解決安卓微信瀏覽器上傳圖片中遇到的bug
- 推薦三款不錯(cuò)的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)
- 百度多文件異步上傳控件webuploader基本用法解析
- 基于WebUploader的文件上傳js插件
- WebUploader客戶端批量上傳圖片 后臺(tái)使用springMVC
相關(guān)文章
jQuery設(shè)置指定網(wǎng)頁元素寬度和高度的方法
這篇文章主要介紹了jQuery設(shè)置指定網(wǎng)頁元素寬度和高度的方法,涉及jQuery操作width及height方法的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法
下面小編就為大家?guī)硪黄獮镴Query EasyUI 表單組件增加焦點(diǎn)切換功能的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
Jquery實(shí)現(xiàn)由下向上展開效果的例子
這篇文章主要介紹了Jquery實(shí)現(xiàn)由下向上展開效果的例子,本文同時(shí)講解了向下展開的例子,需要的朋友可以參考下2014-12-12
使用jquery實(shí)現(xiàn)圖文切換效果另加特效
白天活干完,弄個(gè)jquery仿凡客誠品圖片切換的效果;以前寫的不是很好,今天重新做個(gè)jquery特效,其實(shí)很簡單,感興趣的朋友可以了解下哦,希望本文對你有幫助2013-01-01

