อินเทอร์เฟซไฟล์ HTML5 ใช้ไฟล์เพื่อดาวน์โหลดบนหน้าเว็บ

อินเทอร์เฟซไฟล์ให้ข้อมูลที่เกี่ยวข้องกับไฟล์และเรียกใช้ JavaScript บนหน้าเว็บเพื่อเข้าถึงเนื้อหาของไฟล์

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

หากต้องการใช้ไฟล์บนหน้าเว็บวัตถุที่มักจะต้องมีส่วนร่วมคือ: วัตถุไฟล์วัตถุ FileList วัตถุ FileReader

FileList มาจากสองสถานที่คุณสมบัติไฟล์ขององค์ประกอบอินพุตและการลากและวาง API (เมื่อมีการลากไฟล์ Event.DatAtRansfer.Files เป็นวัตถุ FileList)

 <อินพุต ID = fileItem type = file> var fileList = document.getElementById ('fileItem')

ความยาว: แอตทริบิวต์นี้จะส่งคืนความยาวของวัตถุไฟล์ที่มีอยู่ในวัตถุ FileList เท่านั้น

รายการ (ดัชนี): รับวัตถุไฟล์ที่ระบุไว้ในตำแหน่งที่กำหนดในวัตถุ FileList สามารถสรุปได้ในรูปแบบของดัชนีอาร์เรย์หลายอย่าง

วัตถุ FileList แต่ละชิ้นคือวัตถุไฟล์ วัตถุไฟล์เป็นหยดพิเศษ

1.LastModify: เวลาที่มีการแก้ไขไฟล์เวลานี้เป็นมิลลิวินาทีที่ผ่านไปที่ 0: 0: 00 ในวันที่ 1 มกราคม 1970 เป็นคุณลักษณะที่อ่านได้

2.Name: ชื่อไฟล์ของไฟล์ที่อ้างอิงโดยวัตถุไฟล์ซึ่งเป็นแอตทริบิวต์ที่อ่านได้

3.Type: ประเภทไฟล์ของไฟล์ที่อ้างอิงโดยวัตถุไฟล์เป็นประเภทของฉันซึ่งเป็นแอตทริบิวต์ที่อ่านได้

4.Size: ขนาดไฟล์ของไฟล์ที่อ้างอิงโดยวัตถุไฟล์แอตทริบิวต์หนึ่ง -อ่านนี้

ไม่มีวิธีที่จะกำหนดวัตถุไฟล์เพียงอย่างเดียว แต่มีวิธีที่จะสืบทอดจากวัตถุ Blob

วัตถุ filereader ช่วยให้เว็บแอปพลิเคชันสามารถอ่านไฟล์บนคอมพิวเตอร์ผู้ใช้แบบอะซิงโครนัส

filereader () เป็นตัวสร้างที่สามารถสร้างวัตถุ Filereader ใหม่ผ่านมัน

var filereader = new filereader ();

1.error: ส่งคืนข้อผิดพลาดที่เกิดขึ้นระหว่างกระบวนการอ่าน

2.Result: ส่งคืนเนื้อหาของไฟล์และประเภทนั้นมีค่าควรพิมพ์หรือ ArrayBuffer คุณลักษณะนี้ถูกกฎหมายหลังจากอ่านการดำเนินการเท่านั้น

3.readyState: ส่งคืนสถานะปัจจุบันของการดำเนินการ

1.Abort (): การดำเนินการอ่านขัดจังหวะ ค่าของ ReadeState กลายเป็น 2. 2.

2. ReadasarrayBuffer (Blob): อ่าน blob ที่ระบุเช่นวัตถุไฟล์ (วัตถุไฟล์เป็น blob พิเศษ) ตราบใดที่การอ่านเสร็จสิ้นค่าของคุณสมบัติ ReadyState จะกลายเป็น 2 และแอตทริบิวต์ผลลัพธ์คือ ArrayBuffer ที่แสดงถึงข้อมูลไฟล์

3. ReadasDataUrl (Blob): อ่าน blob ที่ระบุเช่นวัตถุไฟล์ (blob พิเศษ) ตราบใดที่การอ่านเสร็จสมบูรณ์ค่าของแอตทริบิวต์ ReadyState จะกลายเป็น 2 แอตทริบิวต์ผลลัพธ์คือ URL ที่แสดงถึงข้อมูลไฟล์และรูปแบบข้อมูลคือสตริงสตริง Base64 -Ecneded String

 <อินพุตประเภท = ไฟล์ onChange = previewFile ()> <br> <img src = ความสูง = 200 var preview = document.queeryselector ('img'); ไฟล์ [0];

4. Readastext (boob, การเข้ารหัส): อ่าน blob ที่ระบุเช่นวัตถุไฟล์ (วัตถุไฟล์เป็น blob พิเศษ) ตราบใดที่คุณอ่านค่าของคุณสมบัติ ReadyState จะกลายเป็น 2 และแอตทริบิวต์ผลลัพธ์คือสตริงข้อความที่แสดงถึงข้อมูลไฟล์ พารามิเตอร์ที่สองเป็นทางเลือก

1.Abort: การสิ้นสุดเมื่ออ่านการดำเนินการ

2. ข้อผิดพลาด: ทริกเกอร์เมื่ออ่านการดำเนินการระหว่างการดำเนินการ

3. โหลด: ทริกเกอร์เมื่ออ่านการดำเนินการสำเร็จ

4. การโหลด: ทริกเกอร์ในตอนท้ายของการดำเนินการอ่าน ไม่สามารถอ่านความสำเร็จหรือล้มเหลวได้

5.LoadStart: ทริกเกอร์ที่จุดเริ่มต้นของการดำเนินการอ่าน

6. ประมวลผล: ทริกเกอร์ระหว่างกระบวนการอ่าน

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

 <input type = file id = input>

การเข้าถึงไฟล์ที่เลือกผ่านอินพุต

 var selectfile = document.getElementById ('อินพุต')

คุณสามารถเลือกไฟล์ทีละไฟล์ได้ทีละไฟล์ เลือกหลายไฟล์ในแต่ละครั้งก่อนที่ Gecko 1.9.2

สำหรับอินเทอร์เฟซ Drag and Drop คุณสามารถดู HTML5 DrageVent

ขั้นตอนที่ 1: สร้างพื้นที่ตำแหน่ง องค์ประกอบธรรมดาเช่น div, p ฯลฯ

ขั้นตอนที่ 2: เพิ่ม Drop, Dragenter, โปรแกรมประมวลผลเหตุการณ์ Dragover ไปยังพื้นที่วาง บทบาทสำคัญคือโปรแกรมการประมวลผลเหตุการณ์ Drop

ด้านล่างนี้เป็นตัวอย่างของแผนภาพสั้น ๆ :

 <div id = 'dropbox' class = 'dropbox'> </div> .dropbox {Border: Solid 3px Red;

 Dropbox; (e) {E.StopPropagation (); ); i]; );

ด้านบนเป็นอินเทอร์เฟซไฟล์ HTML5 ที่แนะนำโดย Xiaobian เพื่อดาวน์โหลดไฟล์บนหน้าเว็บ ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!