ASP 使用 jQuery Ajax File Uploader插件上传文件（适用于支持H5的浏览器）

  开篇先吐个槽：自从公司策略调整以后，几乎没有什么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>

 下面的是ASP的上传处理脚本

    /// <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;
            }
        }
    }

 如此就ok啦~要注意以下几点：

 1.配置方法要写到上传组件下方
 2.IOS设备录制完的视频是MOV格式，所以上传后缀名限制那里一定要加上mov