关于上传视频到七牛的一些解决方案

     <div class="form-group">
                <label>上传视频：</label>
                <div class="my-upload">
                    <div class="">
                        <input type="file" id="fileupload" name="fileupload" class="" />
                    </div>
                </div>
            </div>
          
            <div style="padding-top: 30px; padding-left: 283px;">
                <video src="@Html.ValueFor(c => c.VedioLink)" id="vediofile" style="width:400px;height:250px;" controls="controls">
                </video>
            </div>
            @Html.HiddenFor(c => c.VedioLink, new { @id = "vedio" })
            <span style="margin-left: 20%;" id="progress" >上传进度：0%</span>

<script>
   //上传视频
    $('input[name=fileupload]').change(function () {
        //console.log("in it");
        layer.msg('上传视频中...请不要关闭或刷新页面...')
        var formData = new FormData($("#uploadForm")[0]);
        var xhr = new XMLHttpRequest();
        var url = "/Console/UploadVedio/Indexs";
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
                var returndata = eval("(" + xhr.responseText + ")");
                console.log(returndata.datas);
                if (returndata.status == 1) {
                    layer.msg(returndata.msg);
                } else {
                    layer.msg(returndata.msg);
                    $("#vediofile").attr('src', returndata.datas)
                    $("#vediofile2").attr('src', returndata.datas)
                    $("#vedio").val(returndata.datas);
                }
            }
        };
        //进度条部分
        xhr.upload.onprogress = function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                if (percentComplete==100) {
                    document.getElementById('progress').innerHTML = "上传进度完成！正在进行保存操作，提示上传成功之前，请不要关闭和刷新页面！";
                } else {
                    document.getElementById('progress').innerHTML = "上传进度：" + percentComplete + "%";
                }
              
            }
        };
        xhr.send(formData);
    });
</script>

这里使用了XMLHttpRequest 进行视频的上传

使用 XMLHttpRequest .upload.onprogress 显示上传进度

后台的接收代码

   [HttpPost]
        public ActionResult Indexs(FormCollection collection)
        {
            HttpPostedFileBase file = HttpContext.Request.Files[0];
            if (file != null)
            {

                if (file.FileName.Length > 2 && fileName.ToLower().IndexOf(".mp4") < 0)
                {
                    return WriteError("请上传.MP4格式的视频");
                }
            }
            string fileName = GetFileName(file.FileName);// GetFileName();
            string saveName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + fileName;
            string playFile = Server.MapPath(PublicMethod.upFile + saveName);

            string upFileName = PublicMethod.upFile + saveName;

            //上传视频到本地
            file.SaveAs(playFile);
            //将视频上传到七牛
            qiniufun.PutFile(qiniufun.qnSpace, qiniufun.fullname(upFileName), Server.MapPath(upFileName));
        }
        public string GetFileName(string fileName)
        {
            int i = fileName.LastIndexOf("\\") + 1;
            string Name = fileName.Substring(i);
            return Name;
        }

上传到七牛过程中发生如下问题

1.使用普通上传方式只能上传文件大小于100M以内的视频

　　说到这个问题要吐槽一下七牛的sdk ，在nuget下载下来的dll和官方文档上面的示例代码方法名和方法很多都对不上。

2.上传的视频无法在PC端和手机端同时播放正常

　　对于上面的这个问题七牛有个小技巧可以查看视频的编码

　　http://7xo9nf.com2.z0.glb.qiniucdn.com/test.mp4?avinfo//视频地址+？avinfo 

　　解决方案：使用格式工厂将视频的编码改成AVC(H262) 或者ACV（H264）编码即可

好了解决上述问题之后发现把代码发布到iis环境代码又有如下问题

1.MP4格式的文件iis无法识别

　　添加视频的mime类型即可 .mp4  video/mp4

2.上传文件夹访问权限问题

3.iis 上传文件大小限制

 　　选中网站主页-》请求筛选-》编辑功能设置-》设置允许最大内容长度　

4.请求的时间限制

　　webconfig设置还有XMLHttpRequest 设置 

           <httpRuntime targetFramework="4.5.2" maxRequestLength="1048576" executionTimeout="3600" />

  配置本地iis上传大小

<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="2147483647"/>
</requestFiltering>
</security>

</system.webServer>