開篇先吐個槽：自從公司策略調整以後，幾乎沒有什麼3D、AR、VR的專案讓我來做了~於是···為了避免被認為無所事事，

只好硬著頭皮開始做ASP的專案了~~好在大家用的都是C# ┐(´∀｀)┌

迴歸正題，當前接手的ASP專案是執行在微信平臺的一個上傳視訊投票的小專案，裡面的難點就在於視訊上傳啦~其他的都是

資料庫的操作啥的，就不多說了；雖然說ASP自帶檔案上傳的功能，但是既然有更成熟的外掛，那我們就直接拿來用一下好了~

（其實是沒時間去自己寫這個功能┐(￣ヮ￣)┌）。

今天介紹的外掛就是~~jQuery Ajax File Uploader（點選跳轉），這個外掛功能還是比較齊全的~話不多說，直接上程式碼~

首先~需要在頁面裡引入外掛（src裡的路徑按照你的檔案目錄填寫哈）

<script src="/path/to/jquery.dm-uploader.min.js"></script>

然後~你得在頁面裡有一個上傳檔案的元件

<div class="weui-cell ">
    <div id="drag-and-drop-zone" class="weui-cell__hd w100p tac">
        <input id="fileupload" type="file" class="ms-star_upload" name=""/>
    </div>
</div>
<div align="center">
    <progress id="uploadprogress" max="100" style="width: 80%;" value="0"></progress>
</div>
 

接下來就開始配置外掛

<script>
            $(function () {
                $('#drag-and-drop-zone').dmUploader({ //
                    url: 'UpLoaded.ashx?count='+$('#count').val(),//處理上傳事件的指令碼地址，可以通過get方式傳參
                    maxFileSize: 3000000, // 檔案上限 ，目前為3M
                    auto: false, //是否為自動上傳（即選擇檔案後是否自動上傳），預設為true
                    multiple: false, //是否是多檔案，預設為true，但是在IOS端設定為true的話上傳相簿會出問題，為了ios能夠識別，建議設定為false
                    allowedTypes: "video/*", //允許的檔案型別
                    extFilter: ['mp4','mov'], //允許的檔案字尾名
                    onInit: function () {  //初始化函式
                        // Plugin is ready to use
                        console.log('Penguin initialized :)', 'info');
                    },
                    onFileSizeError: function (file) { //當檔案大小超出最大值時回撥次函式
                        showWindow('大小不能超過30M');	//彈窗顯示內容，這個需要自己寫啦~或者用alert（‘大小不能超過30M’）也是可以的~
                    },
                    onFileTypeError: function (file) { //當檔案型別錯誤時回撥次函式
                        showWindow('僅支援上傳視訊');
                    },
                    onFileExtError: function (file) { //當檔案字尾名錯誤時回撥次函式
                        showWindow('僅支援上傳mp4和mov格式視訊');
                    },
                    onComplete: function () {  //上傳結束後回撥此函式
                        // All files in the queue are processed (success or error)
                        console.log('All pending tranfers finished');
                    },
                    onNewFile: function (id, file) { //選擇新檔案時回撥此函式
                        // When a new file is added using the file selector or the DnD area
                        console.log('New file added #' + id);
                    },
                    onBeforeUpload: function (id) {	//上傳前呼叫此函式
                        // about tho start uploading a file
                        $('#uploadprogress').show();
                    },
                    onUploadProgress: function (id, percent) {	//上傳過程中呼叫此函式
                        // Updating file progress
                        $('#uploadprogress').val(percent);
                        $('#uploadprogress').text(percent + '%');
                    },
                    onUploadSuccess: function (id, data) {	//上傳成功回撥函式
                        // A file was successfully uploaded
                        showWindow('視訊上傳成功!');
                        console.log('Server Response for file #' + id + ': ' + JSON.stringify(data));
                        console.log('Upload of file #' + id + ' COMPLETED', 'success');
                    },
                    onUploadError: function (id, xhr, status, message) {//上傳出錯回撥函式
                        // Happens when an upload error happens
                        showWindow(JSON.stringify(message));
                        console.log(id + 'danger' + message);
                    }
                });
            });
        </script>
 

        <script>
            function uploadFile() {
                $("#drag-and-drop-zone").dmUploader("start", fileid);
            }
        </script>

    /// <summary>
    /// UpLoaded 的摘要說明
    /// </summary>
    public class UpLoaded : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            int _count = Convert.ToInt32(context.Request["count"]);
            HttpPostedFile MyFile = context.Request.Files[0];
            string[] Mystr = MyFile.FileName.Split('.');
            if (MyFile == null || Mystr.Length < 1)
            {
                context.Response.Write("未知錯誤！");
                return;
            }
            //型別鑑別
            if (Mystr[1] != "MP4" && Mystr[1] != "mov")
            {
               context.Response.Write("模型檔案型別錯誤");
                return;
            }
            string MdoelPath = context.Server.MapPath("~/UploadFile/");//檔案上傳儲存
            if (!Directory.Exists(MdoelPath))//如果不存在就建立file資料夾  
            {
                Directory.CreateDirectory(MdoelPath);
            }
                MyFile.SaveAs(MdoelPath + MyFile.FileName);
                context.Response.Write("true." + MyFile.FileName);
                VideoProxy.GetInstance().UploadVideo(Mystr[0], "~/UploadFile/" + MyFile.FileName, _uid, _activityid);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }