HTML5+WebSocket ใช้ตัวอย่างของการอัปโหลดหลายไฟล์ในเวลาเดียวกัน

การอัปโหลดหลายไฟล์ในเวลาเดียวกันในแอปพลิเคชัน HTTP แบบดั้งเดิมและการอัปโหลดและดูความคืบหน้าของการอัปโหลดเป็นสิ่งที่ลำบากมาก ของเอกสารชิ้นหนึ่งก็สะดวกมาก

อาจดูตัวอย่างฟังก์ชั่นที่คุณต้องทำ:

ฟังก์ชั่นหลักคือผู้ใช้สามารถลากและวางไฟล์ของโฟลเดอร์ลงในหน้าเว็บโดยตรงและอัปโหลด

เพื่ออำนวยความสะดวกในการอ่านข้อมูลไฟล์ข้อมูลไฟล์ที่อ่านได้ง่าย ๆ จะถูกห่อหุ้มด้วยไฟล์ต้นฉบับ

 Function FileInfo (ไฟล์หน้า) {this.size = file.size; หน้า = 0; 16);: loadcallback = null; lse {this.pages = math.floor (this.size / this.pagesize);}} fileinfo.prototype.reset = function () {this.pageindex = 0; function () {var binary = 'var bytes = ใหม่ uint8aray (this.databuffer) var len = bytes.bytelength; i])} return window.btoa (ไบนารี);} fileinfo.prototype.onloaddata = function (evt) {var obj = evt.target [tag]; databuffer = evt .target.result; }} fileInfo ผู้อ่าน [แท็ก] = สิ่งนี้; นับ; channel = file._Channel; }}} ฟังก์ชั่น (ผลลัพธ์) {if (result.status == null || result.status == undefined) {file.pageIndex ++; if (file.pageIndex <file.pages) {file.load (file.onuploaddata);}} else {ถ้า (file.uploaderror! = null) file.uploaderror (ไฟล์, data.status);}); = ฟังก์ชั่น (ช่อง, url) {var fi = this; ถ้า (ถ้า (ถ้า (ถ้า (ถ้า result.status == null || result.status == undefined) {fi._channel = channel; fi._url = result.data; fi.load (fi.onuploaddata); (ไฟล์. uploaderRor! = null) file.uploaderror (fi, result.status);}});}

การประมวลผลของคลาสนั้นง่ายมาก ไฟล์

ไม่จำเป็นต้องทำสิ่งที่ซับซ้อนใน HTML5 ที่จะถูกลากใน HTML5

 ฟังก์ชั่น ondragenter (e) {e.stoppropagation (); (e) {E.StopPropagation (); ('โค้งมน');

คุณจะต้องได้รับการลากและวางไฟล์ที่เกี่ยวข้องในระหว่างกระบวนการ ondrop

ในเวลานี้คุณจะต้องสร้างวัตถุ FileInfo ที่เกี่ยวข้องสำหรับไฟล์ที่เลือกและเรียกใช้วิธีการอัปโหลด

 ฟังก์ชั่น onfileOpen (ไฟล์) {ถ้า (files.length> 0) {สำหรับ (var i = 0; i <files.length; i ++) {var info = new fileinfo (ไฟล์ [i], 32768); ;

อัปเดตข้อมูลความคืบหน้าของไฟล์อัปโหลดผ่านเหตุการณ์ UploadProcess

 ฟังก์ชั่น onuploadProcess (ไฟล์) {$ ('#p_' + file.id) .progressBar ({value: (file.pageIndex / file.pages) * 100, text: file.filename + ' + fi le.uploadbytes +' / / ' + file.size +'] '});}

ด้วยความช่วยเหลือของการสนับสนุนของ Beetle สำหรับ WebSocket การใช้งานเซิร์ฟเวอร์ที่เกี่ยวข้องนั้นง่ายมาก

 /// <summary> /// ลิขสิทธิ์© Henryfan 2012 /// CreateTime: 2012/12/14 21:13:34 /// </summary> ตัวจัดการระดับสาธารณะ หน้า, สตริง base64data) {Console.writeLine (fileid: {2}, pageIndex: {0} หน้า: {1} Datalength: {3}, PageIndex, FileID, base64data.lengt h);} uploadfile สตริงสาธารณะ FileName String, ขนาดยาว) {Console.WriteLine (FileId: {2}, ชื่อไฟล์: {0} ขนาด: {1}, ชื่อไฟล์, ขนาด, fileid);

มีสองวิธีในวิธีเซิร์ฟเวอร์ของการอัพโหลดคำขอไฟล์และวิธีการอัปโหลดไฟล์บล็อกการรับ

คุณต้องการรหัสง่าย ๆ ข้างต้นเพื่อให้ได้ฟังก์ชั่นการอัปโหลดแบบหลายไฟล์ การประมวลผล Mask Plus Plus Plus การสูญเสีย Base64 นั้นค่อนข้างหนัก

ดาวน์โหลดรหัส: websocketupload.rar

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้