ความคิดเห็น: วันนี้ฉันจะแบ่งปันแอปพลิเคชั่นง่ายๆเพื่อแสดงวิธีการใช้ filereader กับคุณ Filereader เป็น API การทำงานของไฟล์ที่มีให้ใน HTML5 เพื่อนที่ต้องการมันสามารถเรียนรู้เกี่ยวกับมัน
ในบทความก่อนหน้านี้ฉันได้แบ่งปันตัวอย่าง HTML5 หลายตัวอย่างกับคุณคือการสาธิตฟังก์ชั่นการลากและดรอปการสาธิตเนื้อหาหน้าแก้ไขได้และการสาธิตฟังก์ชั่นการจัดเก็บในท้องถิ่น วันนี้ฉันจะแบ่งปันแอปพลิเคชั่นง่าย ๆ เพื่อแสดงวิธีการใช้ Filereader ซึ่งเป็น API การทำงานของไฟล์ที่ให้ไว้ใน HTML5เมื่อคุณดูตัวอย่าง HTML 5 ที่ฉันเขียนไว้ก่อนหน้านี้ฉันกำลังคิดที่จะสร้างตัวอย่างที่เรียบง่าย แต่ใช้งานได้เพื่อเจาะคุณสมบัติ HTML5 ใหม่เหล่านี้ในลักษณะที่แปลกประหลาดยิ่งขึ้น เป้าหมายของฉันคือไม่เพียงแค่แสดง HTML 5 APIs เหล่านี้ แต่เพื่อใช้ตัวอย่างเพื่อบอกนักพัฒนาถึงวิธีการใช้ API เหล่านี้อย่างแท้จริงในวิธีที่ใช้งานได้จริงและเป็นนวัตกรรม
ใน HTML5 การเข้าถึงระบบไฟล์ท้องถิ่นจากหน้าเว็บกลายเป็นเรื่องง่ายมากนั่นคือการใช้ไฟล์ API ข้อมูลจำเพาะไฟล์นี้มี API เพื่อแสดงวัตถุไฟล์ในเว็บแอปพลิเคชัน คุณสามารถเลือกพวกเขาและเข้าถึงข้อมูลของพวกเขาผ่านการเขียนโปรแกรม API ไฟล์นี้รวมถึง:
ลำดับ filelist แสดงถึงอาร์เรย์ของแต่ละไฟล์ที่เลือกในระบบท้องถิ่น อินเทอร์เฟซผู้ใช้ที่ใช้ในการเลือกไฟล์สามารถนำไปใช้ผ่านการเรียก <อินพุต type = file> call
อินเทอร์เฟซ Blob ที่แสดงถึงข้อมูลไบนารีดั้งเดิมซึ่งคุณสามารถเข้าถึงข้อมูลไบต์ภายใน
อินเทอร์เฟซไฟล์มีข้อมูลแอตทริบิวต์แบบอ่านอย่างเดียวของไฟล์เช่นชื่อไฟล์ประเภทไฟล์และที่อยู่การเข้าถึงข้อมูลไฟล์
อินเทอร์เฟซ filereader ที่ให้วิธีการอ่านไฟล์และโมเดลเหตุการณ์ที่ได้รับผลลัพธ์จากการอ่านไฟล์
อินเทอร์เฟซ Fileerror และวัตถุ FileException ที่กำหนดเงื่อนไขการสร้างข้อผิดพลาดในข้อกำหนดนี้
วิธีการใช้ตัวอย่างนี้: ในตัวอย่างนี้ฉันให้ artboard ที่คุณสามารถลากและวางรูปภาพจากระบบไฟล์ท้องถิ่นหรือคุณสามารถใช้กล่องเลือกไฟล์เพื่อเลือกภาพ ในตัวอย่างโปรดเลือกไฟล์รูปภาพเท่านั้นฉันไม่ได้เพิ่มการกรองไฟล์และการตรวจสอบประเภทไฟล์ โปรดจำไว้ว่าไม่มีเบราว์เซอร์ใช้ HTML5 อย่างสมบูรณ์ ตัวอย่างนี้จะต้องทำงานบนเบราว์เซอร์ที่รองรับ HTML5 เช่น Firefox 3.5 หรือสูงกว่า
วิธีหลักในการใช้ไฟล์ API นั้นง่ายมากเช่นนี้:
ฟังก์ชั่น imagesselected (myfiles) {
สำหรับ (var i = 0, f; f = myfiles [i]; i ++) {
var imageReader = new filereader ();
imageReader.onload = (ฟังก์ชั่น (afile) {
ฟังก์ชั่น return (e) {
var span = document.createElement ('span');
span.innerhtml = ['<img src = "', e.target.result, '"/>']. เข้าร่วม ();
document.getElementById ('thumbs') .insertbefore (span, null);
-
}) (f);
imageereader.readasdataurl (f);
-
-
ฟังก์ชั่น dropit (e) {
imagesselected (e.datransfer.files);
E.StopPropagation ();
E.preventDefault ();
-
ฉันเลือกที่จะวางกิจกรรม ondrop ของฉันบน <td>:
<td align = ความสูงซ้าย = 105″ ondragenter = return onDragover = return false onDrop = dropit (เหตุการณ์)>>
<output id = thumbs> </utput>
</td>
ในตัวอย่างนี้ฉันเพิ่งลากไฟล์ท้องถิ่นไปยัง Artboard อย่างไรก็ตามฉันคิดว่ามันสามารถแสดงความสามารถที่เรียบง่าย แต่ทรงพลังของไฟล์ API