プロジェクトの要件は、ビデオファイルなど、サイトを通じて大きなファイルをアップロードアップロードするファイルの断片化によるファンブルを達成するために、その後、背景をマージします。
オープンソースのフロントデスクでは、プラグインWebUploaderをアップロード使用しています（http://fex.baidu.com/webuploader/）
BaiduのWebFE（FEX）チームによるWebUploaderは、現代のファイルアップロードコンポーネントによって補完、HTML5ベースの、FLASHへの単純な開発しました。IE6 +、iOSの6+、アンドロイド4+との互換性、オリジナルのFLASH操作に従って、主流のIEブラウザを放棄しない一方で、HTML5の利点を十分に発揮することができ、現代のブラウザで。ユーザが任意に選択するために二つの実行時には、同じように呼び出します。
同時ファイルアップロードの大きなスライスを使用して、ファイルのアップロードが大幅に効率を向上させることができます。
直接コードで、フロントデスクのCSHTML
@ {
レイアウト= NULL;
}
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ名= "ビューポート"コンテンツ= "幅=装置幅" />
<リンクのhref = "〜/ JS / webuploader / webuploader.css"のrelは= "スタイルシート" />
<リンクのhref = "〜/のJS / bootstrap.min.css"のrel = "スタイルシート" />
<スクリプトSRC = "〜/ JS / jquery.min.js"> </ SCRIPT>
<スクリプトSRC = "〜 /js/webuploader/webuploader.js "> </ SCRIPT>
<タイトル>アップロード</ TITLE>
<スクリプト>
jQueryの（機能（）{
VAR $ = jQueryの、
$一覧= $（ '＃のthelist'）、
dataState、
FM = []、
FNUM、
トークン、
アップローダ;
VAR FileExt = [ "MPG"、 "MPEG"、 "MP4"、 "AVI"];
トークン= 'ViewBag.Token @';
IF（トークン== '' ||トークン== '未定義'）
{
$（ "＃アップローダ"）非表示（）;.
アラート（ "ログインタイムアウト、再度ログインしてください。"）;
}
3つの//モニタブロックアップロードプロセス時点
WebUploader.Uploader.register（{
"送信-前に、ファイル"： "beforeSendFile"、
"前-送信」： "beforeSend"、
"後は、ファイル送信"： "afterSendFile"、
}、{
beforeSendFile：機能（ファイル）{
のvarのstartTime =新しい日付（file.lastModifiedDateを）。
fileNameに= file.name。
= WebUploader.Deferred（遅延VAR）。
（新しいWebUploader.Uploader（））md5File（ファイル、0、10 * 1024 * 1024）。
.progress（関数（パーセンテージ）{
にconsole.log（ "正在读取文件"）;
}）
.then（関数（ヴァル） {
fileMd5 =ヴァル;
fm.push（fileMd5）;
deferred.resolve（）。
}）;
deferred.promise返します（）;
}、
// 2つの時点：見た場合、アップロード・ブロックを、各ブロックの呼び出しにこの機能をアップロードする前に
beforeSend：機能（ブロック）{
VAR用のDeferred）は（WebUploader.Deferred =。
AJAXは、試験前//このブロックは、アップロードされているかどうかを確認するためにファイルをアップロード
this.owner.options.formData.fileMd5 = fileMd5;
this.owner.options.formData.chunk = block.chunk;
deferred.resolve（）;
戻りdeferred.promiseを（ ）;
}
// 3つの時点：正常にアップロードこの関数呼び出しの後にすべての部分
afterSendFileを：機能（ファイル）{
VAR延期= $ .Deferred（）;
FNUM ++;
$（ '＃' + file.id）.find（ 'p.state'）テキスト（ '最後のステップ'）;.
はconsole.log（ファイルを）;
console.log（file.guid）。
$アヤックス（{
タイプ： "POST"、
URL： "/ API / V1 /チェック/ FileMerge"、
データ：{
GUID：file.guid、
fileMd5：FM [FNUM]、
ファイル名：file.name
}、
キャッシュ：偽、
非同期：偽、
成功：関数（応答）{
IF（response.success == TRUE）{
console.log（応答）。
dataState =応答;
フラグ= TRUE。
}他{
フラグ= FALSE。
}
deferred.resolve（）。
}、
エラー：関数（）{
FNUM ++。
dataState =未定義。
フラグ= falseは、
deferred.reject（）;
}
}）;
deferred.promise返します（）;
}
}）;
アップローダー= WebUploader.create（{
サイズを変更：偽、
fileNumLimit：10、
swfファイル： '/js/Uploader.swf'、
サーバー： '/ API / V1 / /のFileSaveをチェック]
選択： '#picker'を、
チャンク：真、
CHUNKSIZE：* 1024 * 1024 10、
chunkRetry：5
//、FORMDATA：{
// GUID：GUID
//}
}）。
uploader.on（ 'beforeFileQueued'、関数（ファイル）{
VAR isAdd = FALSE;
{（; iはFileExt.lengthを<I ++がVAR I = 0）ため
uploader.on（ 'fileQueued'、関数（ファイル）{
）{[I]（file.extに含ま== FileExt場合
file.guid = WebUploader.Base.guid（）。
isAdd =はtrue。
ブレーク;
}
}
戻りisAdd。
}）;
uploader.on（ 'uploadBeforeSend'、関数（オブジェクト、データ、ヘッダ）{
//console.log(object）;
headers.Authorization =トークン;
data.guid = object.file.guid;
}）;
//当有文件添加进来的时候
の$ list.append（ '<div要素のid = "' + file.id + '"クラス= "アイテム">' +
'<H4クラス= "情報">' + file.name + '</ H4>'
'<INPUTタイプ= "隠された" ID =「H_' file.id + +「 "値=" '+ file.guid +' "/> '+
' <Pクラスは、="国家「>アップロードを待っている... </ P> '+
' </ div>「）;
}）;
//ファイルアップロードプロセスを作成します。プログレスバーがリアルタイムで表示されます。
uploader.on（ 'uploadprogressの'機能（ファイルパーセンテージ）{
VAR $ Liが$（ '＃' + file.id）、=
$ $ li.findパーセント=（） 'プログレスプログレスバーを。。';
//作成された重複を避ける
（！$パーセント場合を。
'<DIV CLASS = "プログレス"ロール= "プログレスバー"スタイル= "幅：0％">' +
'</ div>の' +
'</ div>'）appendTo（$李）.find（」。 。プログレスバー'）;
}
$ percent.css（ '幅'、百分率* 100 + '％'）;
}）;
uploader.on（ 'uploadSuccess'、機能（ファイル）{
場合（dataState ==未定義）{
$（ '＃' + file.id）.find（ 'p.state'）テキスト（ '上传失败'）;
$ （ '＃' + file.id）.find（ 'ボタン'）（削除）;
$（ '＃' + file.id）.find（ 'p.state'
フラグ= FALSE;
file.setStatus（ 'エラー'）;
}
もし（dataState.success == TRUE）{
$（ '＃' 。+ file.id）.find（ 'p.state'）テキスト（ '已上传'）;
$（ '＃' + file.id）.find（ 'ボタン'）（削除）。
$（ '＃' + file.id）.find（ 'p.state'）テキスト（ '上传失败'）。
フラグ= falseは、
}
}）。
uploader.on（ 'uploadError'、関数（ファイル）{
$（ '＃' + file.id）.find（ 'p.state'）のテキスト（ '上传出错'）;
}）;
（ 'uploadComplete' uploader.on、関数（ファイル）{
。$（ '＃' + file.id）.find（」。進歩）フェードアウト（）;
}）;
uploader.on（ 'すべて'、関数（タイプ）{
（タイプ=== 'startUpload'）{もし
状態= 'アップロード';
}もしそうでなければ（タイプ=== 'stopUploadは'）{
状態= '一時停止'。
}
}）。
$ btn.on（{）（、機能を'クリック'
IF（状態=== 'アップロード'）{
uploader.stop（）。
}そうであれば（状態== '行わ'）{
window.location.reload（）。
}
他{
uploader.upload（）。
}
}）。
}）;
</スクリプト>
</ HEAD>
<BODY>
の<divのid = "アップローダー"クラス= "WU-例">
<スパンのスタイル= "色：赤">只能上传MPG、MPEG、MP4、AVIファイル格式的视频文件</ span>の
<divのID = "thelist"クラス= "アップローダーリスト"> </ div>
<divのクラス= "btns">
<divのID = "ピッカー"クラス= "webuploaderコンテナ"> <DIV CLASS = "webuploaderピック">选择文件</ div> <divのスタイル= "位置：絶対;トップ：0PX;左：0PX;幅：88px;高さ：34px;オーバーフロー：隠された;底：自動;右：自動;">の<input type = "ファイル"名前= "ファイル"クラス= "webuploader-要素-目に見えない"複数= "複数"> <ラベルスタイル= "不透明度：0;幅：100％;
背景：RGB（255、255、255）; "> </ label>は</ div> </ div> <ボタンのid =" ctlBtn」クラス= "BTN BTN-デフォルト">开始上传</ボタン>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
背景コード：
#regionは、動画のアップロード
、公開IActionResultアップロードを（）
{
; //は提供が、フロントデスクに送信されたときに、アヤックス= HttpContext.Request.Headers要求ViewBag.Token [「認可」]認証情報を取得する
（ビューを返す）;
}
/// <要約>
///アップロード
/// </要約>
/// <>> </戻り値を返します
[HttpPost]
非同期タスク<IActionResult>のFileSave（）公共
{
VAR = DATE要求;
VAR = Request.Form.Filesファイル;
ロングfiles.Sumサイズ=（F => f.Length）;
foreachの（ファイル内のvarたFormFile）
{
IF（formFile.Length>0）
{
文字列FileExt = formFile.FileName.Substring（formFile.FileName.IndexOf（） ''）; //ファイル拡張子、無料の""
長いファイルサイズ= formFile.Length; //バイト単位でファイルサイズを取得します単位
//ストリングnewFileName = "" Guid.NewGuid（）のToString（）+ + fileExt; // ランダムに生成する新しいファイル名
文字列DIRPATH = Path.Combine（_uploadConfig.TmpPath、のRequest.Form [ "GUID"]） ;
IF（Directory.Exists（DIRPATH）！）
{
Directory.CreateDirectory（DIRPATH）;
}
VARファイルパス= DIRPATH + "/" +のRequest.Form [ "チャンク"] + FileExt。
使用して（VARストリーム=新しいFileStreamを（filePathに、FileMode.Create））
{
formFile.CopyToAsync（ストリーム）を待ちます。
}
}
}
OK（新しい{カウント= files.Count、サイズ}）を返します。
}
/// <要約>
///合并请求
/// </要約>
/// <戻る> </戻り>
[HttpPost]
タスク非同期パブリック<IActionResult> FileMerge（）
{
BOOL OK = FALSE;
文字列ERRMSG = "";
試す
{
VAR一時的= Path.Combine（_uploadConfig.TmpPath、のRequest.Form [ "GUID"]）; //临时文件夹
文字列filename =のRequest.Form [ "FILENAME" ]; // 名の
文字列fileExt = Path.GetExtension（fileNameに）; // ファイル拡張子を取得
するvarファイル=のDirectory.GetFiles（一時的に）; //は、 次の書類をすべて取得
するvar finalFilePathを= Path.Combine（_uploadConfig.UpLoadPath + fileNameに）; // エンドファイル名
// VAR新しい新しいFS = FileStreamを（finalFilePath、FileMode.Create）;
使用（VAR新しい新規FS = FileStreamを（finalFilePath、FileMode.Create））
{
foreachの（一部のvar files.OrderBy（X => x.length）.ThenBy（X => X））
{
= NULLバイト。
VARバイト= System.IO.File.ReadAllBytes（パート）
fs.WriteAsync（バイト0、bytes.Length）待ちます。
System.IO.File.Delete（一部）; //删除分块
}
Directory.Delete（一時的な）; //删除文件夹
=真OK。
}
}
キャッチ（例外例）
{
OK = FALSE;
ERRMSG = ex.Message;
log4net.Error（ERRMSG）。
}
（OK）であれば
{
（新しい{成功= TRUE、MSG = ""）[OK]を返します;}
}
他
{
戻りOK（新しい{成功=偽、MSG = ERRMSG}）。;
}
}
#endregion