asp.net mvc 實現上傳文件帶進度條

本文乃是博主早期寫的，此種思路雖然實現了，但當然不是最好的，僅作參考學習。

能夠用js onprogress 、fileinput 、webuploader、jq ajaxsubmit等實現

 

思路：ajax異步上傳文件，且開始上傳文件的時候啓動輪詢來實時獲取文件上傳進度。保存進度我採用的是memcached緩存，由於項目其餘地方也用了的，因此就直接用這個啦。注意：不能使用session來保存進度，由於session是線程安全的不能實時獲取進度，但是試試httpcache或者memorycache，這兩個我沒有試過，請自行嘗試。

ps:使用websocket來實現也是不錯的，不過我沒有試過，有心的大神能夠去試試。

 

下面貼一張效果圖：

 

前端ajax上傳文件，我使用了兩種jq插件。一種是ajaxfileupload，一種是jquery.form.js(如需下載，請百度)

下面的代碼是ajaxFileUpload的：

$.ajaxFileUpload
    (
        {
            url: '/WxManage/Media/UploadImage', //用於文件上傳的服務器端請求地址
            secureuri: false, //是否須要安全協議，通常設置爲false
            fileElementId: 'postFile', //文件上傳域的ID
            type:"post",
            dataType: 'json', //返回值類型 通常設置爲json
            success: function(data, status) //服務器成功響應處理函數
            {
                CloseProgressbar();//關閉進度條 設置進度條進度爲100
                if (data.status == 1) {
                    layer.msg(data.msg, { icon: 1, time: 1000 },function() {
                        parent.location.reload();
                    });
                } else {
                    $("#btnUploadFile").attr("disabled", false);
                    layer.msg(data.msg, { icon: 2, time: 1000 });   
                }
            },
            error: function(data, status, e) //服務器響應失敗處理函數
            {
                $("#btnUploadFile").attr("disabled", false);
                CloseProgressbar();
                layer.closeAll("dialog");
                layer.msg("上傳失敗", { icon: 2, time: 1000 });
            }
        }
    );

 

後端接收文件上傳請求的action：

 1 [HttpPost]
 2         public ActionResult UploadImage(HttpPostedFileBase postFile)
 3         {
 4             if (postFile == null)
 5             {
 6                 return Json(BasicConfig.MessageConfig.Fail("上傳文件不得爲空"));
 7             }
 8 
 9             try
10             {
11                 string format = postFile.FileName.Split('.').Last();//後綴名
12                 SaveFile(postFile);
13                 return Json(BasicConfig.MessageConfig.Success("上傳成功"));
14             }
15             catch (Exception ex)
16             {
17                 return Json(BasicConfig.MessageConfig.Fail("上傳失敗"));
18             }
19         }

 

SaveFile方法是保存文件的方法，採用的是文件流方式保存以便於計算上傳進度：
核心代碼：

 1                 FileStream fs = new FileStream(fileSavePath, FileMode.Create);
 2                 BinaryWriter bw = new BinaryWriter(fs);
 3                 BinaryReader br = new BinaryReader(postFile[i].InputStream);
 4                 
 5                 int readCount = 0;//單次讀取的字節數
 6                 while ((readCount = br.Read(bufferByte, 0, readBufferSize)) > 0)
 7                 {
 8                     bw.Write(bufferByte, 0, readCount);//寫入字節到文件流
 9                     bw.Flush();
10                     saveCount += readCount;//已經上傳的進度
11                     mem.SetValue("Admin_UploadSpeed_" + Session.SessionID, (saveCount * 1.0 / totalCount).ToString("0.00"), 60);//將更新到memcached緩存中
12                     Thread.Sleep(200);//爲了看到明顯的過程故意暫停 
13                 }