HTML5上傳作業進度條-SignalR進階版

using AjaxUpload.Models;

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using System.Threading;

using System.Threading.Tasks;

using System.Web;

using System.Web.Mvc;

namespace AjaxUpload.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Upload(string file, string connId)

        {

            //註: 程式僅為展示用，實際開發時應加入更嚴謹的防錯防呆

            string errMsg = null;

            try

            {

                //取得檔案內容，解析為List<string>

                string content = new StreamReader(Request.InputStream).ReadToEnd();

                var sr = new StringReader(content);

                List<string> lines = new List<string>();

                string line = null;

                while ((line = sr.ReadLine()) != null)

                {

                    lines.Add(line);

                }

                //總筆數及目前處理筆數

                int total = lines.Count, count = 0;

                //使用Task進行非同步處理

                var task = Task.Factory.StartNew(() =>

                {

                    Random rnd = new Random();

                    for (var i = 0; i < lines.Count; i++)

                    {

                        string[] p = lines[i].Split('\t');

                        if (p.Length != 8)

                            throw new ApplicationException("Not a valid text file!");

                        //假裝將資料寫入資料庫，Delay 0-4ms

                        Thread.Sleep(rnd.Next(5));

                        count++;

                    }

                });

                //透過SignalR

                float ratio = 0;

                Action updateProgress = () =>

                {

                    ratio = (float)count / total;

                    UploaderHub.UpdateProgress(connId, file, ratio * 100,

                        string.Format("{0:n0}/{1:n0}({2:p1})", count, total, ratio));

                };

                //每0.2秒回報一次進度

                while (!task.IsCompleted && !task.IsCanceled && !task.IsFaulted)

                {

                    updateProgress();

                    Thread.Sleep(200);

                }

                updateProgress();

                //若正確完成，傳回OK

                if (task.IsCompleted && !task.IsFaulted)

                    return Content("OK");

                else

                    errMsg = string.Join(" | ", 

                        task.Exception.InnerExceptions.Select(o => o.Message).ToArray());

            }

            catch (Exception ex)

            {

                errMsg = ex.Message;

            }

            UploaderHub.UpdateProgress(connId, file, 0, "-", errMsg);

            return Content("Error:" + errMsg);

        }

    }

}

using Microsoft.AspNet.SignalR;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace AjaxUpload.Models

{

    public class UploaderHub : Hub

    {

        //從其他類別呼叫需用以下方法取得UploaderHub Instance

        static IHubContext HubContext = 

                        GlobalHost.ConnectionManager.GetHubContext<UploaderHub>();

        public static void UpdateProgress(string connId, string name, float percentage, 

                                          string progress, string message = null)

        {

            HubContext.Clients.Client(connId)

                .updateProgress(name, percentage, progress, message);

        }

    }

}

    <script src="~/Scripts/jquery-2.1.0.js"></script>

    <script src="~/Scripts/jquery.signalR-1.2.1.js"></script>

    <script src="@Url.Content("~/signalr/hubs")"></script>

    <script src="~/Scripts/knockout-3.1.0.debug.js"></script>

    <script>

        $(function () {

            function viewModel() {

                var self = this;

                self.files = ko.observableArray();

                self.selectorChange = function (item, e) {

                    self.files.removeAll();

                    $.each(e.target.files, function (i, file) {

                        //加入額外屬性

                        file.percentage = ko.observable(0);

                        file.progress = ko.observable();

                        file.widthStyle = ko.computed(function () {

                            return "right:" + (100 - file.percentage()) + "%";

                        });

                        file.message = ko.observable();

                        file.status = ko.computed(function () {

                            var msg = file.message(), perc = file.percentage();

                            if (msg) return msg;

                            if (perc == 0) return "Waiting";

                            else if (perc == 100) return "Done";

                            else return "Uploading...";

                        });

                        self.files.push(file);

                    });

                };

                //以檔名為索引建立Dictionary，方便更新進度資訊

                self.dictionary = {};

                ko.computed(function () {

                    self.dictionary = {};

                    $.each(self.files(), function (i, file) {

                        self.dictionary[file.name] = file;

                    });

                }).extend({ throttle: 100 });

                self.upload = function () {

                    $.each(self.files(), function (i, file) {

                        var reader = new FileReader();

                        reader.onload = function (e) {

                            var data = e.target.result;

                            //以XHR上傳原始格式

                            $.ajax({

                                type: "POST",

                                url: "@Url.Content("~/home/upload")" + 

                                     "?file=" + file.name + "&connId=" + connId,

                                contentType: "application/octect-stream",

                                processData: false, //不做任何處理，只上傳原始資料

                                data: data

                            });

                        };

                        reader.readAsArrayBuffer(file);

                    });

                };

            }

            var vm = new viewModel();

            ko.applyBindings(vm);

            //建立SignalR連線並取得Connection Id

            var connId;

            var hub = $.connection.uploaderHub;

            $.connection.hub.start().done(function () {

                connId = $.connection.hub.id;

            });

            //Server端傳回上傳進度時，更新檔案狀態

            hub.client.updateProgress = function (name, percentage, progress, message) {

                var file = vm.dictionary[name];

                if (file) {

                    file.percentage(percentage);

                    file.progress(progress);

                    if (message) file.message(message);

                }

            };

        });

    </script>