การแนะนำ
การใช้วัตถุ filereader เว็บแอปพลิเคชันสามารถอ่านเนื้อหาของไฟล์ (หรือบัฟเฟอร์ข้อมูลดิบ) แบบอะซิงโครนัสและสามารถใช้วัตถุไฟล์หรือวัตถุ BLOB เพื่อระบุไฟล์หรือข้อมูลที่จะประมวลผล วัตถุไฟล์สามารถมาจากวัตถุ FileList ที่ส่งคืนโดยผู้ใช้หลังจากเลือกไฟล์ในองค์ประกอบ <อินพุต type = "text" />> หรือจากวัตถุ dataTransfer ที่สร้างขึ้นโดยการทำงานแบบลากและวางหรือจากผลการส่งคืนหลังจากดำเนินการ MozgetAsFile ()
หลายหน้าอัปโหลดรหัสตัวอย่างหลายภาพ
<! doctype html> <html> <head> <ment> <title> อัปโหลดภาพเพื่อแสดงภาพตัวอย่าง </title> <style> #Result IMG {ความสูง: 100px; แสดง: Inline-Block; มาร์จิ้น-ขวา: 10px; มาร์จิ้น-ก้น: 10px; } </style> </head> <body> <div> <p> <p> <dable> โปรดเลือกไฟล์ภาพ: </label> <อินพุต type = "file" id = "file_input" style = "แสดง: ไม่มี;" /> </p> <div id = "result"> <a href = "JavaScript: void (0);"> เพิ่มรูปภาพ </a> </vel /> </p> <div id = "result"> <a href = "JavaScript: void (0);"> เพิ่มรูปภาพ </a> </div> </div> <script src = "jQuery-2.2.1.min.js"> </script> <script> $ (นี้) .parents (". add_imgs"). ค้นหา ("อินพุต [type = file]"). คลิก (); "ขออภัยเบราว์เซอร์ของคุณไม่รองรับ filereader"; input.setAttribute ('ปิดใช้งาน', 'ปิดใช้งาน'); } else {$ (อินพุต) .unbind ("เปลี่ยน") บน ("เปลี่ยน", ฟังก์ชั่น () {var file = this.files [0]; ถ้า (!/image /// w+/. ทดสอบ (file.type)) {alert ("ไฟล์ reader. ) ฟังก์ชัน (e) {$ (ผลลัพธ์) .append ('<img src = "'+this.result+'"/>');}})}}}}}}ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้และฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript