1. ไฟล์ API: (ไฟล์ API)
แต่ละไฟล์ที่เลือกโดยตัวควบคุมแบบฟอร์มประเภทไฟล์คือวัตถุไฟล์และวัตถุ FileList เป็นรายการคอลเลกชันของวัตถุไฟล์เหล่านี้ซึ่งแสดงไฟล์ที่เลือกทั้งหมด วัตถุไฟล์สืบทอดมาจากวัตถุ BLOB ซึ่งแสดงถึงข้อมูลดิบแบบไบนารีและให้วิธีการชิ้นเพื่อเข้าถึงบล็อกข้อมูลดั้งเดิมภายในไบต์ ในระยะสั้นวัตถุไฟล์มีวัตถุ flielist และวัตถุไฟล์สืบทอดมาจากวัตถุ Blob!
ความสัมพันธ์ที่เกี่ยวข้องกับแอตทริบิวต์ของแต่ละวัตถุ:
อินเทอร์เฟซ filereader:
ดังที่เห็นได้จากรูป HTML5 ยังให้อินเทอร์เฟซ filereader: ใช้เพื่ออ่านไฟล์ลงในหน่วยความจำและอ่านข้อมูลในไฟล์
var reader = new filereader ();
มีสี่วิธีและหกเหตุการณ์ทั้งหมดสำหรับอินเทอร์เฟซนี้:
• ReadAsBinaryString (ไฟล์): อ่านไฟล์เป็นไบนารี
• readasDataUrl (ไฟล์): อ่านไฟล์ dataurl
• readastext (ไฟล์, [การเข้ารหัส]): อ่านไฟล์เป็นข้อความ
•เกี่ยวกับ (ไม่มี): การอ่านไฟล์ขัดจังหวะ
-
• onabort: ทริกเกอร์เมื่ออ่านไฟล์ขัดจังหวะ
• onerror: ทริกเกอร์เมื่อเกิดข้อผิดพลาดเมื่ออ่านไฟล์
• OnloadStart: ทริกเกอร์เมื่ออ่านไฟล์เริ่มต้น
• OnProgress: ยังคงทริกเกอร์เมื่ออ่านไฟล์
• OnLoad: ทริกเกอร์เมื่ออ่านไฟล์สำเร็จ
• OnLoadend: ทริกเกอร์ในตอนท้ายของการอ่านไฟล์ (ทั้งความสำเร็จและความล้มเหลวจะถูกทริกเกอร์)
พารามิเตอร์เหตุการณ์ข้างต้น e มี e.target.result หรือสิ่งนี้ชี้ไปที่ผลการอ่าน!
2. ลากและวาง API:
แอตทริบิวต์ Drag and Drop: ตั้งค่าแอตทริบิวต์ dragable ขององค์ประกอบที่ต้องลากและลดลงเป็นจริง (dragable =” true”)! องค์ประกอบ IMG และองค์ประกอบสามารถลากและลดลงตามค่าเริ่มต้น
เหตุการณ์ลากและวาง: (แบ่งออกเป็นกิจกรรมลากและวางองค์ประกอบและเหตุการณ์องค์ประกอบเป้าหมาย)
เหตุการณ์ลากและวางองค์ประกอบ:
• DragStart: ทริกเกอร์ก่อนลาก
•ลากทริกเกอร์อย่างต่อเนื่องก่อนและหลังการลาก
• Dragend ปลายการลากทริกเกอร์
เหตุการณ์องค์ประกอบเป้าหมาย:
• Dragenter ป้อนองค์ประกอบเป้าหมายเพื่อทริกเกอร์
• Dragover ระหว่างการเข้าสู่เป้าหมายและออกจากเป้าหมายเรียกอย่างต่อเนื่อง
• Dragleave เรียกองค์ประกอบเป้าหมาย
•หล่นปล่อยทริกเกอร์เมาส์บนองค์ประกอบเป้าหมาย
แต่! ควรสังเกตว่าในองค์ประกอบเป้าหมายพฤติกรรมเริ่มต้นควรถูกปิดกั้น (ปฏิเสธการลากและดร็อป) ในเหตุการณ์การลากและหล่นลงมิฉะนั้นการลากและปล่อยไม่สามารถนำไปใช้ได้!
-
วัตถุ DataTransfer: มันถูกใช้เป็นพิเศษในการจัดเก็บข้อมูลที่จะดำเนินการระหว่างการลากและวาง มันสามารถตั้งค่าเป็นคุณสมบัติ dataTransfer ของเหตุการณ์การลากและวาง
3 คุณลักษณะ:
• Effectallowed: ตั้งค่าสไตล์เคอร์เซอร์ (ไม่มี, คัดลอก, copylink, copymove, link, linkmove, move, all และ uninitialized)
•เอฟเฟก
•ประเภท: ประเภทของข้อมูลที่เก็บไว้, pseudo-array of strings
•ไฟล์: รับไฟล์ที่ลากภายนอกส่งคืนรายการ fileList มีแอตทริบิวต์ประเภทภายใต้ไฟล์ลิสต์ซึ่งส่งคืนประเภทไฟล์
4 วิธี:
• setData (): ตั้งค่าคีย์ข้อมูลและค่า (ต้องเป็นสตริง)
• getData (): รับข้อมูลและรับค่าที่สอดคล้องกันตามค่าคีย์
• ClearData (): ล้างข้อมูลที่เก็บไว้ในวัตถุ DataTransfer
• setDragimage (ImageUrl, log x, long y): ใช้องค์ประกอบ IMG เพื่อตั้งค่าไอคอนการลากและวาง
//ตัวอย่าง:
target.addeventListener ('dragstart', ฟังก์ชั่น (e) {
var fs = e.datatransfer.files; // รับการลากและวางรายการไฟล์ไฟล์ flielist
var dt = e.datatransfer; // คุณสมบัติ dataTransfer เป็นเหตุการณ์ลากและวาง
dt.effectlowed = 'คัดลอก';
dt.setData ('ข้อความ/ธรรมดา', 'สวัสดี');
dt.setDragimage (Dragicom, -10, -10);
-
3. ลากและวางตัวอย่างอัพโหลดภาพตัวอย่าง:
แนวคิด:
1. คุ้นเคยกับเหตุการณ์สี่เหตุการณ์ขององค์ประกอบการลากไฟล์เป้าหมาย หมายเหตุ: พฤติกรรมเริ่มต้นถูกบล็อกในเหตุการณ์ ondragover และ ondrop
2. หลังจากการลากและวางแล้วรับการรวบรวมวัตถุไฟล์: E.DatAtRansfer.Files
3. วนซ้ำวัตถุไฟล์ทุกไฟล์ในคอลเลกชันตัดสินประเภทไฟล์และขนาดไฟล์และดำเนินการที่สอดคล้องกันหากระบุประเภท
4. อ่านข้อมูลไฟล์ไฟล์: ใหม่ filereader () ซึ่งมีวิธีการเช่นการอ่านวัตถุไฟล์เป็น dataurl: readasdataurl (วัตถุไฟล์) เหตุการณ์ที่เกิดขึ้นหลังจากการอ่านที่ประสบความสำเร็จ: เหตุการณ์ onload ฯลฯ
5. ดำเนินการประมวลผลเชิงตรรกะที่สอดคล้องกันในหลาย ๆ เหตุการณ์ในวัตถุ filereader
html:
<div> <p> โปรดลากไฟล์ภาพไปยังพื้นที่นี้! </p> </div>
จำนวนโหลดทั้งหมด: <span id = 'total'> 100 </span>
JQ:
<script type = "text /javascript"> $ (function () { / *ความคิด: *1 ทำความคุ้นเคยกับเหตุการณ์สี่เหตุการณ์ขององค์ประกอบเป้าหมายของเป้าหมายการลากไฟล์หมายเหตุ: พฤติกรรมเริ่มต้นถูกบล็อกใน ondragover และเหตุการณ์ ondrop *2 หลังจากการลาก ประเภทที่ระบุ*4 ODIV = $ (". container"). รับ (0); op.html ('โปรดลากไฟล์ภาพไปยังพื้นที่นี้!'); คอลเลกชัน // พิมพ์ความยาว log (fs.length); console.log (fs [i] .size); $ ("Total"). html (e.total);} // freeze เมื่อการอ่านสำเร็จสิ่งนี้ result คือ reader file reader.onload = function () {// ไฟล์ข้อมูล // console.log (this.result); oimg.attr ("src", this.result); การอัปโหลด Ajax ส่งไฟล์อัพโหลดไฟล์ไบนารี}}}} else {Alert ('โปรดอัปโหลดไฟล์รูปภาพ!');}}}}}); </script>ภาพการทำซ้ำ:
สรุป: การรวมความรู้เกี่ยวกับการลากและวางเหตุการณ์ API วัตถุ DataTransfer และไฟล์การอ่านไฟล์ filelist ฯลฯ เพื่อให้ได้เอฟเฟกต์ตัวอย่างของการลากและวางอัพโหลดรูปภาพอย่างง่าย คุณจำเป็นต้องรู้ความสัมพันธ์และการใช้วัตถุและชี้แจงแนวคิดการใช้งาน!
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น