ตัวอย่างการใช้ API ไฟล์ html5 เพื่ออ่านไฟล์ในเครื่อง (เช่น รูปภาพ, PDF ฯลฯ)

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

HTML5 มอบวิธีการใหม่ในการเล่น ด้วยเบราว์เซอร์เพียงอย่างเดียว คุณสามารถเรนเดอร์ อ่าน และประมวลผลไฟล์ในเครื่อง (จริงๆ แล้วอาจเป็นไฟล์ระยะไกลก็ได้) (ส่วนใหญ่เป็นรูปภาพ) และทั้งหมดนี้ทำผ่าน HTML5 File API บรรลุ.

อย่างแรกคือโครงสร้างข้อมูล HTML5 กำหนดประเภทวัตถุไฟล์เพื่อแสดงไฟล์และแต่ละไฟล์วัตถุสอดคล้องกับไฟล์ ออบเจ็กต์ไฟล์มีคุณลักษณะสามประการ ได้แก่ ชื่อ ขนาด และประเภท name คือชื่อไฟล์ที่ไม่มีเส้นทาง ขนาดคือขนาดไฟล์เป็นไบต์ และประเภทคือ MIME ของไฟล์ (เช่น รูปภาพ/jpg)

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

รับ FileList ผ่านการป้อนข้อมูลประเภทไฟล์

 <input id=ประเภทอินพุตไฟล์=ไฟล์ />

หรือแอตทริบิวต์หลายรายการใหม่ใน HTML5 ที่อนุญาตให้เลือกหลายไฟล์:

 <input id=ประเภทอินพุตไฟล์=หลายไฟล์ />

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

 //Native jsvar inputElement = document.getElementById(file-input);inputElement.addEventListener(change, handleFiles, false);function handleFiles() { var fileList = this.files }//jquery version$('#file-input ').on('change', function() { var fileList = this.files;});

ขั้นแรก ให้กำหนดพื้นที่สำหรับการลากและวาง:

 <div id=สไตล์ดรอปบ็อกซ์=ความกว้าง: 200px;ความสูง: 200px;></div>

นอกจากนี้ เพื่อทริกเกอร์เหตุการณ์ดรอป เราต้องป้องกันพฤติกรรมเริ่มต้นของเหตุการณ์ Dragenter และ Dragover:

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, Dragenter, false);dropbox.addEventListener(dragover, Dragover, false);dropbox.addEventListener(drop, drop, false);ฟังก์ชัน Dragenter(e) { e.stopPropagation(); e.preventDefault();} ฟังก์ชั่น Dragover(e) { e.stopPropagation(); e.preventDefault();}

จากนั้นเราจะได้รับ fileList ในการเรียกกลับของเหตุการณ์ drop:

 ฟังก์ชั่นดรอป (e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files;

HTML5 มีสองวิธี: FileReader และ ObjectUrl

ก่อนอื่นคุณต้องสร้างอินสแตนซ์ของวัตถุ FileReader:

 var reader = new FileReader();

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

 reader.onload = function(e) { document.getElementById(image).src = e.target.result;

ความหมายของโค้ดข้างต้นคือหลังจากที่ FileReader อ่านข้อมูลรูปภาพแล้ว ก็จะใส่ข้อมูล (DataUrl) ลงในแอตทริบิวต์ src

ในที่สุด วิธีการต่างๆ ของ FileReader จะถูกใช้เพื่อตัดสินใจว่าจะใช้รูปแบบข้อมูลใดในการจัดเก็บข้อมูลอ็อบเจ็กต์ไฟล์หลังจากอ่านแล้ว และดำเนินการอ่าน:

1. readAsArrayBuffer(file): อ่านวัตถุไฟล์และจัดเก็บเป็นวัตถุ ArrayBuffer (ฉันยังไม่ทราบว่าวัตถุ ArrayBuffer คืออะไร ควรเป็นโครงสร้างข้อมูลที่สร้างขึ้นเพื่อการเข้าถึงข้อมูลที่มีประสิทธิภาพ)
2. readAsText(file [, 'UTF-8']): อ่านวัตถุไฟล์ในโหมดข้อความทั่วไป เป็นที่น่าสังเกตว่าพารามิเตอร์ตัวที่สอง (เป็นทางเลือก) สามารถใช้เพื่อระบุการเข้ารหัสอักขระ
3. readAsDataURL(file): อ่านวัตถุไฟล์และจัดเก็บเป็นสตริงในข้อมูล: รูปแบบ URL

ObjectURL เทียบเท่ากับเส้นทางชั่วคราวไปยังไฟล์ เส้นทางชั่วคราวนี้สามารถสร้างและเผยแพร่ได้ตลอดเวลา เมื่อใช้ในเบราว์เซอร์ในเครื่อง จะไม่แตกต่างจาก URL ทั่วไป

ใช้การแสดงรูปภาพท้องถิ่นบนเพจเป็นตัวอย่าง:

 var img = document.createElement(img);img.src = window.URL.createObjectURL(ไฟล์);

ในขณะนี้ src ดูเหมือนว่า: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

การใช้ src นี้ทำให้เบราว์เซอร์สามารถอ่านรูปภาพในเครื่องได้

เมื่อเปรียบเทียบกับการใช้ FileReader เพื่อสร้างการเข้ารหัส base64 ของรูปภาพและใส่ไว้ใน src ประสิทธิภาพของโซลูชันนี้ได้รับการปรับปรุงอย่างมาก

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

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network