關於上傳視頻到七牛的一些解決方案

     <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>