1.最初に、大きなファイルのアップロードを実装します。数メガバイトまたは数十メガバイトの場合は、基本的なアップロード方法を使用しますが、大きなファイルアップロードの場合は、シャードアップロードを使用するのが最善です。ここでは、主にクライアントを使用して、サーバーセグメントのシャードデータを読み取り、保存します。サーバーセグメントが読み取られた後、シャードデータが結合されます。
2。フロントエンドコードは次のとおりです。
<％@ page Language = "c＃" autoeventwireup = "true" codebehind = "uploadtest2.aspx.cs" enternits = "html5uploadtest2"％ "％> <html lang =" zh-cn "> <head> <meta charset =" utf-8 "> <タイトル>の例フラグメント</title> <script src = "scripts/jquery-1.8.2.js"> </script> <link href = "bootstrap-progressbar-3.3.4.css" rel = "styleSheet"/>> <src = "boottrap-progressbar/boottrap-prissbar. href = "jqueryui/jquery-ui.css" rel = "styleSheet"/> <script src = "jqueryui/jqueryui.js"> </script> - ％> <scrip> function uploadfile（）{$（ "＃upload"）。 //ファイルオブジェクトfilenum = $（ "＃file"）[0] .files [0] .length、name = file.name、// file name size = file.size、// total size sceed = 0; var shardsize = 2 * 1024 * 1024、// share shardcount = math.ceil（size /shardize）; //スライスの総数$（'。Progress.Progress-Bar '）。フォーム、FormDataは、HTML5に追加された新しいVARフォームです。 = new formdata（）; form.append（ "data"、file.slice（start、end））; //スライスメソッドは、ファイルform.append（ "name"、name）の一部を切り取るために使用されます。 form.append（ "total"、shardcount）; //スライスの総数form.append（ "index"、i + 1）; //現在のスライス数は// ajaxは$ .ajaxを提出します（{url： "upload.ashx"、type： "post"、data：form、async：true、// async processdata：// jqueryにcontenttypeを処理しないことを伝えることが非常に重要です： {++ sceed; $（ "＃output"） {var progressbarwidth = percent * $ element.width（）/100; $ element.find（ 'div'）。animate（{width：progressbarwidth}、500）.html（パーセント + "％"）;} // $（document）。 }）; //}）; function updateProgress（パーセンテージ）{$（'。Progress.Progress-Bar '）。 onclick = "uploadfile（）;"> upload </button> <span id = "output" style = "font-size：12px"> waiting </span> <div> <div id = "progressbar" rowsbar "data-transitiongoal =" "> </div> </div> </html>3.一般的なバックグラウンド処理手順は次のとおりです。
Systemを使用; System.Collections.Generic; System.linq;を使用してSystem.linq; system.web; namespace html5uploadtest {/// <summary> /// upload> summary説明/</summary>パブリッククラスアップロード：ihttphandler {public void processrequest（htcontextenttty.contextenttty.contextenteptenttepest（ "text/plain"; try {//リクエストからパラメーターを選択します。アップロードされたファイルはリクエストの文字列であることに注意してください。files名= context.request ["name"]; int total = convert.toint32（context.request ["total"]）;ディスク文字列dir = context.request.mappath（ "〜/temp"）; string file = path.combine（dir、name + "_" + index）; data.saveas（file）; //既に最後のシャードである場合、もちろん、最終ファイルを直接書き込むなどの他の方法を使用することもできます。合計）{file = path.combine（dir、name）; // byte [] bytes = null; （fileStream fs = new fileStream（file、filemode.openorcreate）））を使用する{for（int i = 1; i <= total; ++ i）{string pate = path.combine（dir、name + "_" + i）; // bytes = system.io.file.readallbytes（part）; // fsswrite、bytes、0、0、0、 null;System.IO.File.Delete(part);fs.Close();}}}}}catch (Exception){throw;}//Return whether it is successful, simplified processing is done here //return Json(new { Error = 0 });}public bool IsReusable{get{return false;}}}}4.もちろん、背景には、継続するには、いくつかの例外処理または停電と送信も必要です。 。 。
上記は、私があなたに紹介したBootstrap ProgressBarのコードの例です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！