การอัปโหลดไฟล์แอปพลิเคชัน HTML5

เป็นเวลานานนักพัฒนาได้รับความทุกข์ทรมานจากสิ่งนี้ บางเว็บไซต์ใช้แอตทริบิวต์ enableype = multipart/form-data ของแท็กฟอร์ม แต่แอตทริบิวต์นี้ต้องการเซิร์ฟเวอร์เพื่อทำการตั้งค่าพิเศษเพื่อแสดงความคืบหน้าและมันก็ซับซ้อน เรา.

ทีนี้มาดูกันว่าทำไม HTML5 จึงสามารถแก้ปัญหานี้ได้และทำได้ดีแค่ไหน

ในมาตรฐาน HTML5 วัตถุ XMLHTTTPREQUEST ถูกกำหนดใหม่ซึ่งเรียกว่า XMLHTTTPREQUEST Level 2 ซึ่งมีคุณสมบัติใหม่ 5 ประการต่อไปนี้:

1. สนับสนุนการอัปโหลดและดาวน์โหลดไบต์เช่นไฟล์ blobs และข้อมูลแบบฟอร์ม

2. เพิ่มความคืบหน้าของการอัปโหลดและดาวน์โหลด

3. การสนับสนุนคำขอข้ามโดเมน

4. อนุญาตคำขอที่ไม่ระบุชื่อ (นั่นคือส่วนอ้างอิงที่ไม่ส่ง HTTP)

5. อนุญาตให้หมดเวลาของคำขอ

ในบทช่วยสอนนี้เราให้ความสนใจกับคุณสมบัติที่หนึ่งและสองโดยเฉพาะอย่างยิ่งรายการที่สอง-มันสามารถให้ความคืบหน้าการอัปโหลดที่เราต้องการ ซึ่งแตกต่างจากแผนก่อนหน้านี้โซลูชันนี้ไม่ต้องการให้เซิร์ฟเวอร์ทำการตั้งค่าพิเศษดังนั้นทุกคนสามารถลองได้โดยดูที่การสอน

แผนภาพข้างต้นคือเนื้อหาที่เราสามารถทำได้:

1. แสดงข้อมูลไฟล์ที่อัปโหลดเช่นชื่อไฟล์, พิมพ์, ขนาด

2. แถบความคืบหน้าซึ่งสามารถแสดงความคืบหน้าได้จริง

3. ความเร็วในการอัปโหลด

4. การประมาณเวลาที่เหลือ

5. จำนวนข้อมูลที่อัปโหลด

6. การตอบสนองของเซิร์ฟเวอร์ที่ส่งคืนหลังจากการอัปโหลดสิ้นสุดลง

นอกจากนี้ด้วย XMLHTTPREQUEST กระบวนการอัปโหลดของเราเป็นแบบอะซิงโครนัสดังนั้นเมื่อผู้ใช้อัปโหลดไฟล์มันยังคงสามารถใช้งานองค์ประกอบอื่น ๆ ในหน้าเว็บและไม่จำเป็นต้องรอการอัปโหลดเพื่อให้เสร็จสมบูรณ์ หลังจากการอัปโหลดสิ้นสุดลงเราจะได้รับการตอบกลับจากเซิร์ฟเวอร์กลับดังนั้นกระบวนการอัปโหลดทั้งหมดจึงค่อนข้างสมเหตุสมผล

HTML5 เพิ่มเหตุการณ์ความคืบหน้าใหม่ซึ่งให้ข้อมูลต่อไปนี้แก่เรา:

1. ขนาดทั้งหมด -ไฟล์

2. โหลด -ขนาดของการอัปโหลด

3. ความยาวของการคำนวณ -ไม่ว่าจะสามารถคำนวณความคืบหน้าได้

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

ไม่แตกต่างจากรหัสอัปโหลดไฟล์ธรรมดามากนัก อย่างไรก็ตามโปรดทราบว่าแท็กอินพุตเชื่อมโยงฟังก์ชัน JavaScript บน OnChange

 <! แถว> <label for = fileToUpload> เลือกไฟล์เพื่ออัปโหลด </label> <อินพุต type = ชื่อไฟล์ = fileToUpload id = fileToUpload = fileselec ted ();/> </div> <div id = filename> </div> <div id = filesize> </div> <div id = fileType> </div> <div class = row> <อินพุต type = ปุ่ม onclick = uploadFile () value = upload/>> << div

เมื่อเราใช้อินพุตใน HTML เราจะได้รับวัตถุ FileList ในรหัส JS วัตถุนี้เป็นส่วนหนึ่งของไฟล์ API ที่เพิ่มขึ้นใหม่ใน HTML5

1. ชื่อ - ชื่อไฟล์ (ไม่รวมพา ธ )

2. ประเภท -file ประเภท (ตัวพิมพ์เล็ก)

3. ขนาด -ขนาดไฟล์ (ยูนิตคือไบต์)

นี่คือสิ่งที่เราต้องการ แน่นอน HTML5 ยังมีวัตถุ filereader แต่เราไม่ได้ใช้ที่นี่ ตอนนี้ผ่านเนื้อหาสามข้างต้นเราสามารถควบคุมขนาดและประเภทไฟล์ที่ผู้ใช้อัปโหลดเพื่อลดแรงกดดันในระหว่างเซิร์ฟเวอร์และปรับปรุงปัจจัยความปลอดภัย

 Function Fileted () {var file = document.getElementById ('filetoupload') .Size * 100 / (1024 * 1024)) / 100) .tring () + 'MB'; document.getElementById ('FileName') 'type:' + file.type;}}

แล้วจะเกิดอะไรขึ้นเมื่อผู้ใช้เลือกไฟล์ที่ดีและคลิกอัปโหลด

 ฟังก์ชั่น uploadfile () {var xhr = ใหม่ xmlhttprequest (); ; ส่ง (fd);} ฟังก์ชั่น uploadprogress (evt) {ถ้า (evt.lengthcomputable) {var percentcomplete = math.round ) + '%';} else {document.gTelementById ('progressNumber') .innerhtml = 'ไม่สามารถคำนวณได้';}} function uploadcomplete (evt) { / * เหตุการณ์นี้จะเพิ่มขึ้นเมื่อเซิร์ฟเวอร์ส่งการตอบกลับ * / การแจ้งเตือนกลับ (evt.target.responsetext);

ในรหัสบรรทัดที่สองรหัส JS ของเราใช้วัตถุใหม่ -FormData อื่นที่เปิดตัวโดย HTML5 อื่น วัตถุ FormData เป็นชุดข้อมูลฟอร์มของผู้ใช้ เราส่งข้อมูลไปยังเซิร์ฟเวอร์โดยเปลี่ยนวัตถุนี้

แน่นอนเราสามารถสร้างวัตถุนี้ด้วยตนเองในรหัสเช่นเช่นนี้:

 var fd = new FormData (); ]);

กลับไปที่หัวข้อ เมื่อมองย้อนกลับไปที่รหัสก่อนหน้านี้เราได้เพิ่มการตรวจสอบเหตุการณ์จำนวนมากของ XMLHTTPREQUEST โดยเฉพาะอย่างยิ่งมันเป็นสิ่งสำคัญที่จะต้องทราบว่าสิ่งที่เรากำลังเชื่อมโยงไม่ใช่ xmlhttprequest ตัวเอง แต่คุณลักษณะของมันเช่น uploadprogress

ในที่สุดลองดูรหัสที่สมบูรณ์

 <! [0]; ถ้า (ไฟล์) {var filesize = 0; ) + 'MB'; .name; document.getElementById ('filesize') fd.append (filetoupload, document.getElementById ('filetoupload') ไฟล์ [0]); เท็จ); เปอร์เซ็นต์ = math.round (ev.loaded * 100 / evt.total); 'progressNumber') การคำนวณ '; โดยผู้ใช้หรือเบราว์เซอร์ลดการเชื่อมต่อ);} </script> </head> <boody> <form id = form1 enctype = multipart/form-data = post action = upload.php> <div class = row row > <label = fileToup load> เลือกไฟล์ที่จะอัปโหลด </label> <อินพุต type = ชื่อไฟล์ = fileToUpload id = fileToUpload onChange = filesElect ();/> </div> <div id = filename> </div> < div id = fi lesize> </div> <div id = fileType> </div> <div class = row> <อินพุตประเภท = ปุ่ม onClick = uploadFile () value = upload/> </div m> </body> </html>

งานของเราเสร็จสิ้นหรือไม่? อาจกล่าวได้ว่ามันเสร็จสมบูรณ์เพราะรหัสนี้สามารถทำภารกิจอัปโหลดไฟล์ให้เสร็จสมบูรณ์และสามารถแสดงความคืบหน้าของการอัปโหลดได้ เรามีหลายสิ่งหลายอย่างที่ยังไม่ได้ทำเช่น CSS เช่น CSS Beautify และอื่น ๆ แต่นี่ไม่ใช่ธีมของบทความของเรา

ในที่สุดเตือนคุณว่ารหัสของการสอนควรดำเนินการบนเบราว์เซอร์ที่รองรับคุณสมบัติใหม่

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