1. 먼저 큰 파일 업로드를 구현하십시오 . 몇 메가 바이트 또는 수십 개의 메가 바이트 인 경우 기본 업로드 방법을 사용하지만 파일 업로드가 큰 경우 Shard 업로드를 사용하는 것이 가장 좋습니다. 여기서는 주로 클라이언트를 사용하여 Sharded 데이터를 서버 세그먼트에 읽은 다음 저장합니다. 서버 세그먼트를 읽은 후에는 샤드 데이터가 결합됩니다.
2. 프론트 엔드 코드는 다음과 같습니다.
< %@ page language = "c#"autoeventwireup = "true"codebehind = "uploadtest2.aspx.cs"inherits = "html5uploadtest.uploadtest2" %> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <title> html5 barge files <title> src = "스크립트/jquery-1.8.2.js"> </script> <link href = "bootstrap-progressbar/bootstrap -progressbar-3.3.4.css"rel = "stylesheet"/> <scrc = "bootstrap-progressbar/bootstrap-progressbar.js"> href = "jqueryui/jquery-ui.css"rel = "stylesheet"/<script src = "jqueryui/jquery-ui.js"> </script>-%> <cript> function uploadfile () {$ ( "#upload") $ ( "#file") [0] .files [0], // file Object filenum = $ ( "#file") // 총 슬라이스 수 $ ( '. progress .progress-bar'). att 양식, FormData는 HTML5에 추가 된 새로운 VAR 양식입니다. = 새로운 FormData (); form.append ( "data", file.slice (start, end)); // 슬라이스 메소드는 파일 양식의 일부를 잘라내는 데 사용됩니다. form.append ( "Total", ShardCount); // 총 슬라이스 수 양식 .Append ( "index", i + 1); // 현재 슬라이스 수는 // ajax가 $ .ajax ({url : "upload.ashx", type : "post", data : form, async : true, // async processData : false, // contenttype : false, // (false, //)를 지정하는 것이 매우 중요합니다. {++ 성공; $ ( "#output"). text (성공 + " /" + shardCount); var % = ((성공 / shardCount) .tofixed (2)) * 100; updateProgress ( %); if (shardCount) {$ ( "#upload"). RemovEattr ( "disabled"); {var progressbarwidth =% * $ emeter.width ()/100; $ element.find ( 'div'). 애니메이션 ({width : progressbarwidth}, 500) .html (% + "%");} // $ (document () {) {// $ ( '. progress .progress-bar'). }); //}); 함수 updateProgress (백분율) {$ ( '. procision .progress-bar'). attr ( 'data-transitionGoal', 백분율) .ProgressBar ({display_text : 'fill'});} </script> </head> <body> <input> <input type = "id ="/> onclick = "uploadfile ();"> upload </button> <span id = "output"style = "font-size : 12px"> 대기 </span> <div> <div> <div> <div> "role ="progressbar "data-transitiongoal ="> </div> </div> </body> </html>3. 일반적인 배경 처리 절차는 다음과 같습니다.
System.Collections.generic; System.IO 사용; System.Linq; System.Web 사용; System.Web; 네임 스페이스 html5uploadtest {/// <summary> /// upload /// </summary> public class upload : ihttphandler {public void processRequest (httpconte) {conte.restcont.conecont. = "text/plain"; try {// 요청에서 매개 변수를 선택하고, 업로드 된 파일은 request.files name = context.request [ "name"]; int total = convert.toint32 (context.request [ "Total"]); int index = context.toint32 (context.Request [ "index"); 컨트리 텍스트 [ "" 샤드 to disk string dir = context.request.mappath ( "~/temp"); String file = path.combine (dir, name + "_" + index); data.saveas (파일); // 이미 마지막 샤드 인 경우 // 물론 각 파일을 수신 할 때 최종 파일의 해당 위치에 직접 쓰는 것과 같은 다른 방법을 사용할 수 있지만, 파일을 조정할 수 있습니다. == Total) {file = path.combine (dir, name); // byte [] bytes = null; 사용 (filestream fs = new Filestream (file, filemode.openorcreate))) {for (int i = 1; i <= total; ++ i) {string part = path.combine (dir, name + "_" + i); // bytes = system.io.file.readallbytes (part); // ws.writes (bytes, bytes.); null; system.io.file.delete (part); fs.close ();}}}}}} catch (예외) {rask;} // 성공 여부에 관계없이 반환, 단순화 된 처리가 수행됩니다.4. 물론, 배경은 또한 예외 처리 또는 정전 및 전송을 계속하려면 전송이 필요합니다. . .
위는 내가 당신에게 소개 한 부트 스트랩 진행 바의 예제 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!