asp.net實現大視訊上傳

阿新 • • 發佈：2022-01-11

本人在2010年時使用swfupload為核心進行檔案的批量上傳的解決方案。見文章：WEB版一次選擇多個檔案進行批量上傳(swfupload)的解決方案。

本人在2013年時使用plupload為核心進行檔案的批量上傳的解決方案。見文章：WEB版一次選擇多個檔案進行批量上傳(Plupload)的解決方案

最近在學習百度的開源上傳元件WebUploader，寫了一些示例以記錄。WebUploader的缺點是沒有一個比較好的現成的介面，這個介面需要自己去實現。自由度高了一些。

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件。在現代的瀏覽器裡面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH執行時，相容IE6+，iOS 6+, android 4+。兩套執行時，同樣的呼叫方式，可供使用者任意選用。瀏覽器支援ie6,ie7,ie8,ie9,ie10,ie11,firefox,chrome,edge。支援全平臺作業系統：Windows,Mac,Linux支援資料夾上傳下載，檔案批量上傳下載，層級目錄儲存。

關於WebUploader的功能說明：

大檔案上傳續傳

支援超大檔案上傳(100G+)和續傳，可以關閉瀏覽器，重啟系統後仍然繼續上傳。
開源
提供ASP.NET,JSP,PHP示例和原始碼，其中JSP提供MySQL,Oracle,SQL Server資料庫的配置和示例程式碼。

分片、併發

分片與併發結合，將一個大檔案分割成多塊，併發上傳，極大地提高大檔案的上傳速度。

當網路問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個檔案。另外分片傳輸能夠更加實時的跟蹤上傳進度。

預覽、壓縮

支援常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網路資料傳輸。

解析jpeg中的meta資訊，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta資料。

多途徑新增檔案

支援檔案多選，型別過濾，拖拽(檔案&資料夾)，圖片貼上功能。上傳本地指定路徑的檔案，不需要通過點選按鈕選擇檔案。

貼上功能主要體現在當有圖片資料在剪下板中時（截圖工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點選複製），Ctrl + V便可新增此圖片檔案。

HTML5 & FLASH

相容主流瀏覽器和低版本瀏覽器，介面一致，實現了兩套執行時支援，使用者無需關心內部用了什麼核心。而且支援IE6，IE8瀏覽器。

同時Flash部分沒有做任何UI相關的工作，方便不關心flash的使用者擴充套件和自定義業務需求。

基於記憶體對映模式進行IO操作，充分發揮作業系統效能。
MD5秒傳

當檔案體積大、量比較多時，支援上傳前做檔案md5值驗證，一致則可直接跳過。

如果服務端與前端統一修改演算法，取段md5，可大大提升驗證效能，耗時在20ms左右。

易擴充套件、可拆分

採用可拆分機制, 將各個功能獨立成了小元件，可自由搭配。

採用AMD規範組織程式碼，清晰明瞭，方便高階玩家擴充套件。

資料夾上傳

支援10萬+級別的資料夾上傳，續傳。

支援層級目錄結構儲存，上傳後能夠將資料庫層級資訊儲存在資料庫中。
提供MySQL,Oracle,SQL Server資料庫支援。

支援資料夾續傳，在瀏覽器重新整理，重啟後仍然能夠繼續上傳。

支援跨域上傳。

PC端全平臺支援
支援Windows,macOS,Linux。支援國產化作業系統，支援政務資訊保安專案。
其中Windows支援低版本系統：Windows XP。
其中瀏覽器包括：IE6,IE7,IE8(x86,x64),IE9(x86,x64),IE10(x86,x64),IE11(x86,x64),360安全瀏覽器,360極速瀏覽器,QQ瀏覽器,搜狗瀏覽器,Maxthon(遨遊)瀏覽器1.X,Maxthon(傲遊)瀏覽器2.x,Firefox,Chrome,Opera 23+

一：下面就是利用WebUploader元件，讓客戶一次選擇多個檔案，然後將選擇的檔案上傳到伺服器的批量檔案解決方案。

讓我們先來看看客戶端的介面效果圖。（多選檔案，批量上傳，上傳進度顯示）

1)顯示介面：

2)進行多檔案選擇：

3)上傳進度顯示

說明：見上圖WebUploader預設是3個執行緒一起併發上傳檔案。如果需要增加併發數，或是減少併發數。可以修改threads屬性，這個屬性就是允許的最大上傳併發數。

3)上傳成功顯示

二：具體的程式碼與操作步驟：

第一步，要完成下面的示例，必須先準備好WebUploader元件。

1) WebUploader:大家可以訪問WebUploader官方網站：http://www.webuploader.net，在這個網站上可以下載到元件與demo。

第二步，這個示例的目錄結構如圖：

1.主要目錄結構

2.此示例中用到的js指令碼檔案與css檔案。

第三步，前臺部分準備客戶操作的WEB介面，如下[WebUploaderFileByBaidu2.aspx、UploaderFileByBaidu.ashx]

1)前臺客戶端程式碼，其中WebUploaderFileByBaidu2.aspx的程式碼如下，WebUploaderFileByBaidu2.aspx.cs檔案中只使用預設的程式碼，不用新增任何程式碼。

Html程式碼

<%@ Page Language="C#"AutoEventWireup="true"CodeBehind="WebUploaderFileByBaidu2.aspx.cs"Inherits="WebApplication1.WebUploaderFileByBaidu2"%><!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>WebUploader檔案上傳示例</title>

<scripttype="text/javascript"src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<linkhref="Scripts/webuploader/webuploader.css"rel="stylesheet"/>

<scripttype="text/javascript"src="Scripts/webuploader/webuploader.min.js"></script>

<linkhref="https://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet"/>

<linkhref="Scripts/style.css"rel="stylesheet"/>

<linkhref="Scripts/demo.css"rel="stylesheet"/>

<linkhref="Scripts/font-awesome.css"rel="stylesheet"/>

<scripttype="text/javascript">

varapplicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";

//檔案上傳jQuery(function() {

var$ = jQuery,

$list = $('#fileList'),

$btn = $('#ctlBtn'),

state = 'pending',

uploader;

uploader = WebUploader.create({

//不壓縮image

resize:false,

// swf檔案路徑

swf: applicationPath + 'Script/webuploader/Uploader.swf',

//檔案接收服務端。

server: 'UploaderFileByBaidu.ashx',

//選擇檔案的按鈕。可選。

//內部根據當前執行是建立，可能是input元素，也可能是flash.

pick: '#picker'

});

//當有檔案新增進來的時候

uploader.on('fileQueued',function(file) {

$list.append('<div id="' + file.id + '" class="item">' +

'<h4 class="info">' + file.name + '</h4>' +

'<p class="state">等待上傳...</p>' +

'</div>');

});

//檔案上傳過程中建立進度條實時顯示。

uploader.on('uploadProgress',function(file, percentage) {

var$li = $('#' + file.id),

$percent = $li.find('.progress .progress-bar');

//避免重複建立

if(!$percent.length) {

$percent = $('<div class="progress progress-striped active">' +

'<div class="progress-bar" role="progressbar" style="width: 0%">' +

'</div>' +

'</div>').appendTo($li).find('.progress-bar');

}

$li.find('p.state').text('上傳中');

$percent.css('width', percentage * 100 + '%');

});

uploader.on('uploadSuccess',function(file) {

$('#' + file.id).find('p.state').text('已上傳');

});

uploader.on('uploadError',function(file) {

$('#' + file.id).find('p.state').text('上傳出錯');

});

uploader.on('uploadComplete',function(file) {

$('#' + file.id).find('.progress').fadeOut();

});

uploader.on('all',function(type) {

if(type === 'startUpload') {

state = 'uploading';

}elseif(type === 'stopUpload') {

state = 'paused';

}elseif(type === 'uploadFinished') {

state = 'done';

}

if(state === 'uploading') {

$btn.text('暫停上傳');

}else{

$btn.text('開始上傳');

}

});

$btn.on('click',function() {

if(state === 'uploading') {

uploader.stop();

}else{

uploader.upload();

}

});

</script></head>

<body>

<divclass="container-fluid">

<divclass="col-md-10">

<divclass="row">檔案上傳示例：</div>

<divclass="row">

<divid="uploader"class="wu-example">

<divid="fileList"class="uploader-list"></div>

<divclass="btns">

<divid="picker"class="btn btn-primary">選擇檔案</div>

</div>

<divclass="row">

</div>

<divclass="row"><buttonid="ctlBtn"class="btn btn-default">開始上傳</button></div>

</div>

<div>

</div>

</body></html>

以上程式碼最後的顯示結果如下圖:

2)接收前端使用者上傳的檔案，並把檔案儲存到指定目錄中。UploaderFileByBaidu.ashx檔案中使用預設的程式碼，不需要新增任何程式碼。UploaderFileByBaidu.ashx.cs檔案的程式碼如下：

usingSystem;usingSystem.Collections.Generic;usingSystem.IO;usingSystem.Linq;usingSystem.Text;usingSystem.Web;namespaceWebApplication1

{

///<summary>

///UploaderFileByBaidu的摘要說明

///</summary>

publicclassUploaderFileByBaidu : IHttpHandler

{

publicvoidProcessRequest(HttpContext context)

{

context.Response.ContentEncoding = Encoding.UTF8;

if(context.Request["REQUEST_METHOD"] =="OPTIONS")

{

context.Response.End();

}

SaveFile();

}

///<summary>

///檔案儲存操作

///</summary>

///<param name="basePath"></param>

privatevoidSaveFile(stringbasePath ="~/Upload/Images/")

{

basePath = FileHelper.GetUploadPath();

stringDatedir = DateTime.Now.ToString("yy-MM-dd");

stringupdir = basePath +"\\"+ Datedir;

stringextname =string.Empty;

stringfullname =string.Empty;

stringfilename =string.Empty;

HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;

if(files.Count ==0)

{

varresult ="{\"jsonrpc\" : \"2.0\", \"error\" :\"儲存失敗\",\"id\" :\"id\"}";

System.Web.HttpContext.Current.Response.Write(result);

}

if(!Directory.Exists(updir))

Directory.CreateDirectory(updir);

varsuffix = files[0].ContentType.Split('/');

var_suffix = suffix[1].Equals("jpeg", StringComparison.CurrentCultureIgnoreCase) ?"": suffix[1];

var_temp = System.Web.HttpContext.Current.Request["name"];

if(!string.IsNullOrEmpty(_temp))

{

filename = _temp;

}

else

{

Random rand =newRandom(24* (int)DateTime.Now.Ticks);

filename = rand.Next() +"."+ _suffix;

}

fullname =string.Format("{0}\\{1}",updir , filename);

files[0].SaveAs(fullname);

var_result ="{\"jsonrpc\" : \"2.0\", \"result\" : null, \"id\" : \""+ filename +"\"}";

System.Web.HttpContext.Current.Response.Write(_result);

}

publicboolIsReusable

{

get

{

returnfalse;

}

第四步：檔案輔助類

/// <summary>///FileHelper的摘要說明/// </summary>public classFileHelper

{

publicFileHelper()

{

//TODO:在此處新增建構函式邏輯

//}

/// <summary>

///獲取上傳目錄

/// </summary>

/// <returns></returns>

public static stringGetUploadPath()

{

string path = HttpContext.Current.Server.MapPath("~/");

string dirname =GetDirName();

string uploadDir = path +"\\" +dirname;

CreateDir(uploadDir);

returnuploadDir;

}

/// <summary>

///獲取臨時目錄

/// </summary>

/// <returns></returns>

public static stringGetTempPath()

{

string path = HttpContext.Current.Server.MapPath("~/");

string dirname =GetTempDirName();

string uploadDir = path +"\\" +dirname;

CreateDir(uploadDir);

returnuploadDir;

}

private static stringGetDirName()

{

return System.Configuration.ConfigurationManager.AppSettings["uploaddir"];

}

private static stringGetTempDirName()

{

return System.Configuration.ConfigurationManager.AppSettings["tempdir"];

}

public static void CreateDir(stringpath)

{

if (!System.IO.Directory.Exists(path))

{

System.IO.Directory.CreateDirectory(path);

}

第五步，Web.config檔案配置資訊。

<?xml version="1.0" encoding="utf-8"?><configuration>

</configSections>

<addkey="uploaddir"value="upload"/>

<addkey="tempdir"value="temp"/>

</appSettings>

<system.web>

<compilationdebug="true"targetFramework="4.0"/>

<authenticationmode="Windows"/>

<httpRuntimemaxRequestLength="2147483647"appRequestQueueLimit="1200"executionTimeout="1200"/>

<pagescontrolRenderingCompatibilityVersion="3.5"clientIDMode="AutoID"/>

</system.web>

<system.webServer>

<requestLimitsmaxAllowedContentLength="2147483647"></requestLimits>

</requestFiltering>

</security>

</system.webServer></configuration>

第六步，在進行上傳之後，檔案儲存在對應的日期目錄下。如下圖。

後端程式碼邏輯大部分是相同的，目前能夠支援MySQL,Oracle,SQL。在使用前需要配置一下資料庫，可以參考我寫的這篇文章：web大檔案上傳解決方案 – 澤優軟體部落格
歡迎入群一起討論“374992201”

asp.net實現大視訊上傳

asp.net實現大視訊上傳

ASP.NET MVC+LayUI視訊上傳

asp.net core webapi檔案上傳功能的實現

java大視訊上傳實現

基於JavaScript實現大檔案上傳後端程式碼例項

Asp.Net Mvc 帶引數上傳圖片

javascript前端實現多視訊上傳

如何解決Asp.Net Core 3.1上傳檔案出現跨域

asp.net core OSS STS 上傳 Excel 檔案

asp.net使用ajaxFileUpload外掛上傳檔案（附原始碼）

java實現大檔案上傳

大視訊上傳T級別解決方案

asp.net core Webapi 3.1 上傳檔案的多種方法(附大檔案上傳) 以及swagger ui 上傳檔案

asp.net+大檔案上傳

ASP.NET Core實現多檔案上傳

asp.net大檔案上傳解決方案

asp.net大檔案上傳和斷點續傳

asp.net大檔案上傳如何做斷點續傳

C#.NET大檔案上傳解決方案

C#.NET 大檔案上傳解決方案(500M以上)

asp.net實現大視訊上傳

相關推薦