最近剛作了視頻上傳的功能，有一些心得還有注意事項，這裏不貼所有代碼，主要是講述編碼思路。本代碼基於.net core 、html5示例css
完成視頻上傳的兩種思路html
一、視頻分片上傳，好比把整個視頻拆分紅2兆一片，最後一片上傳完再組合成一個視頻。這種方式是針對斷網、服務器中斷鏈接等中斷的狀況html5
具體實現方式：jquery
- 計算文件須要差分紅幾片
- 按1,2,3...排序拆好放到文件夾
- 最後一片拆好後合併成一個視頻文件
- 最後刪除分片的文件夾，避免無用資源堆積
如下是html部分的代碼ajax
<div class="row" style="margin-top: 20px; margin-left: 20px;">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<input type="text" value="請選擇文件" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">
<input type="button" value="瀏覽" onclick="path.click()" style="border:1px solid #ccc;background:#fff">
<input type="file" id="path" style="display:none" multiple="multiple" onchange="upfile.value=this.value">
<p style="margin-top: 20px;">
<button type="button" id="file" onclick="UploadStart()">開始上傳</button>
<span id="output" style="color: darkgreen;font-size: large"> </span>
<label id="labErrorTip" style="color: red"></label>
</p>
<p id="showXC" style="margin-top: 20px;display: none">
<input type="button" id="btnXC" value="繼續上傳" />
</p>
</div>
<div class="col-lg-4"></div>
</div>
<div style="margin-top: 10px;">
<video width="60%" id="myVideo" controls>
<source src="" id ="VideoURL" type="video/mp4" autoplay="true">
</video>
</div>
代碼分析：HTML定義了顯示文件路徑文本框、選擇文件的按鈕、上傳按鈕、顯示視頻的Video(html5出的)。點擊瀏覽選擇文件，文件路徑顯示在上面的文本框內，點擊開始上傳按鈕執行上傳代碼。跨域
如下是JS代碼：服務器
var UploadPath = ""; var errorNum = 0; var stop = false; //開始上傳 function UploadStart() { var file = $("#path")[0].files[0]; if (file.length <= 0) { $.fail("請選擇文件"); return false; } $("#file").attr("onclick", "void()"); $("#file").html("上傳中..."); $("#file").attr("disabled", true);//禁用上傳按鈕 AjaxFile(file, 0); } function AjaxFile() { var file = $("#path")[0].files[0]; var name = file.name, //文件名 size = file.size, //總大小shardSize = 2 * 1024 * 1024, shardSize = 2 * 1024 * 1024,//以2MB爲一個分片 shardCount = Math.ceil(size / shardSize); //總片數 if (i >= shardCount) { return; } //計算每一片的起始與結束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //構造一個表單，FormData是HTML5新增的 var form = new FormData(); form.append("data", file.slice(start, end)); //slice方法用於切出文件的一部分 form.append("lastModified", file.lastModified); form.append("fileName", name); form.append("total", shardCount); //總片數 form.append("index", i + 1); //當前是第幾片 form.append("sizeKB", size / 1024); //大小 KB UploadPath = file.lastModified; //Ajax提交文件 $.ajax({ url: "後臺處理地址", type: "POST", xhrFields: { withCredentials: true //配置http跨域請求中攜帶cookie }, data: form, async: true, //異步 processData: false, //很重要，告訴jquery不要對form進行處理 contentType: false, //很重要，指定爲false才能造成正確的Content-Type success: function (result) { if (result != null) { if (result.code == "-1") { $.fail(result.msg); $("#file").attr("onclick", "UploadStart()"); $("#file").val("開始上傳"); $("#file").attr("disabled", false); return false; } i = result.number++; var num = Math.ceil(i * 100 / shardCount); if (num > 99) { $("#output").text("即將完成..."); } else { $("#output").text(num + '%'); } $("#labErrorTip").html(""); $("#showXC").css("display", "none"); AjaxFile(file, i); if (result.mergeOk) { var filepath = $("#path"); filepath.after(filepath.clone().val("")); filepath.remove();//清空input file $("#output").text("上傳成功"); $("#VideoURL").attr("src", result.data);//更新數據源 document.getElementById("myVideo").load();//從新啓動Video，若是不從新啓動Video不會播放新視頻 document.getElementById("myVideo").play();//播放 $("#file").removeAttr("disabled");//打開上傳按鈕 $("#file").html("開始上傳"); } } }, error: function () { errorNum = errorNum + 1; if (errorNum > 2) { $("#labErrorTip").html("發生異常"); $("#showXC").css("display", "block"); $("#btnXC").attr("onclick", "UploadStart()"); } else { $("#labErrorTip").html("發生異常，正在嘗試繼續上傳"); AjaxFile(file, i); } } }); }
代碼分析：在js裏對文件進行拆分，拆分的計算公式跟分頁的理論同樣，而後把片斷髮到後臺進行一系列處理。上面要注意的點都寫了註釋，重點的幾個點也標註了。後臺代碼就不貼了，組合片斷的方式網上搜一搜能夠找到，記得找出的片斷排下序以避免視頻錯亂。cookie
二、也能夠整個視頻上傳後，若是中斷可根據已上傳的大小來判斷從某個點開始繼續上傳。這種方式沒作過，道理差很少app