1. ก่อนอื่นให้ใช้การอัปโหลดไฟล์ขนาดใหญ่ หากเป็นเมกะไบต์ไม่กี่เมกะไบต์หรือเมกะไบต์หลายสิบตัวให้ใช้วิธีการอัปโหลดพื้นฐาน แต่ถ้าเป็นการอัปโหลดไฟล์ขนาดใหญ่คุณควรใช้การอัปโหลดของ Shard ที่นี่ส่วนใหญ่ฉันใช้ไคลเอนต์เพื่ออ่านข้อมูลที่ถูกทำลายไปยังเซ็กเมนต์เซิร์ฟเวอร์จากนั้นบันทึก หลังจากอ่านเซ็กเมนต์เซิร์ฟเวอร์แล้วข้อมูลที่ถูกรวมเข้าด้วยกัน
2. รหัสส่วนหน้ามีดังนี้:
< %@ page language = "c#" autoEventWireUp = "true" codebehind = "uploadtest2.aspx.cs" สืบทอด = "html5uploadtest.uploadtest2" %> <html lang = "zh-cn"> <head> src = "สคริปต์/jQuery-1.8.2.js"> </script> <link href = "bootstrap-progressbar/bootstrap-progressbar-3.3.4.css" rel = "stylesheet"/> <script src = "bootstrap-progressbar href = "jQueryui/jQuery-ui.css" rel = "stylesheet"/> <script src = "jQueryui/jQuery-ui.js"> </script>-%> <prist> ฟังก์ชั่น uploadfile () {$ ("#upload") // ไฟล์ไฟล์ไฟล์ filenum = $ ("#file") [0] .files [0] .length, name = file.name, // ชื่อชื่อไฟล์ = file.size, // ขนาดทั้งหมดประสบความสำเร็จ = 0; var Shardsize = 2 * 1024 * 1024 // จำนวนชิ้นทั้งหมด $ ('. ความคืบหน้า. progress-bar'). attr ('data-transitiongoal', 0) .progressBar ({display_text: 'เติม'}); สำหรับ (var i = 0; i <shardcount; ++ i) {// คำนวณตำแหน่งเริ่มต้น แบบฟอร์ม FormData เป็นรูปแบบ VAR ใหม่ที่เพิ่มเข้ามาใน HTML5 = New FormData (); form.append ("data", file.slice (เริ่มต้นสิ้นสุด)); // เมธอดชิ้นใช้เพื่อตัดส่วนหนึ่งของฟอร์มไฟล์ Append ("ชื่อ", ชื่อ); Form.append ("Total", ShardCount); // จำนวนแบบฟอร์มชิ้นทั้งหมด ("ดัชนี", i + 1); // จำนวนชิ้นปัจจุบันคือ // ajax ส่ง $ .ajax ({url: "upload.ashx", พิมพ์: "โพสต์", ข้อมูล: แบบฟอร์ม, async: จริง, // async processData: เท็จ // มันสำคัญมากที่จะบอก jQuery {++ scunct; $ ("#output"). ข้อความ (ประสบความสำเร็จ + " /" + ShardCount); var เปอร์เซ็นต์ = ((ประสบความสำเร็จ / shardcount) .tofixed (2)) * 100; update -progress (เปอร์เซ็นต์); ถ้า (ประสบความสำเร็จ == ShardCount) {$ ("upload") ProgressBarWidth = เปอร์เซ็นต์ * $ element.width ()/100; $ element.find ('div'). animate ({width: progressbarwidth}, 500) .html (เปอร์เซ็นต์ + "%");} // $ (เอกสาร) }); //}); ฟังก์ชั่น updateProgress (เปอร์เซ็นต์) {$ ('ความคืบหน้า. progress-bar'). attr ('data-transitiongoal', เปอร์เซ็นต์) .progressBar ({display_text: 'Fill'});} </script> </head> onclick = "uploadfile ();"> อัปโหลด </button> <span id = "เอาต์พุต" style = "ตัวอักษรขนาด: 12px"> รอ </span> <div> <div id = "progressbar" role = "progressbar" data-transitiongoal = ""3. ขั้นตอนการประมวลผลพื้นหลังทั่วไปมีดังนี้:
การใช้ระบบ; การใช้ System.collections.generic; การใช้ System.io; การใช้ System.linq; การใช้ System.web; namespace html5uploadtest {/// <summary> /// คำอธิบายสรุปสำหรับการอัปโหลด //// </summary> การอัปโหลดคลาสสาธารณะ "text/plain"; ลอง {// เลือกพารามิเตอร์จากคำขอโปรดทราบว่าไฟล์ที่อัปโหลดเป็นสตริงใน request.files name = context.request ["name"]; int total = convert.toint32 (บริบท. สตริงดิสก์ dir = context.request.mappath ("~/temp"); String file = path.combine (dir, ชื่อ + "_" + index); data.saveas (ไฟล์); // ถ้าเป็นแผ่นสุดท้ายแล้ว ทั้งหมด) {file = path.combine (dir, ชื่อ); // byte [] bytes = null; การใช้ (filestream fs = new fileStream (ไฟล์, fileMode.openorCreate)) {สำหรับ (int i = 1; i <= ทั้งหมด; ++ i) {string part = path.combine (dir, ชื่อ + "_" + i); null; system.io.file.delete (ส่วน); fs.close ();}}}}} catch (ข้อยกเว้น) {throw;} // ส่งคืนไม่ว่าจะประสบความสำเร็จ4. แน่นอนพื้นหลังยังต้องการการจัดการข้อยกเว้นหรือการหยุดทำงานและการส่งกำลังที่จะดำเนินต่อไป - -
ข้างต้นเป็นรหัสตัวอย่างของ Bootstrap ProgressBar ที่ฉันแนะนำให้รู้จักกับคุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!