โค้ดตัวอย่างสำหรับการอัปโหลดไฟล์แบบลากและวาง HTML5

ส่วนประกอบนี้ใช้งานตาม Vue.js กรอบงาน UI คือ elementUI ที่อยู่สาธิตที่สมบูรณ์อยู่ที่ https://github.com/Msxiaoma/upload-folder

1. ลากและวางหลายโฟลเดอร์พร้อมกัน
2. ลบโฟลเดอร์ที่ระบุ
3. แสดงแถบความคืบหน้าการอัพโหลดของโฟลเดอร์ปัจจุบัน
4. อัปโหลดโฟลเดอร์ที่มีขนาดเกิน 5M ในส่วนต่างๆ

ผลกระทบมีดังนี้:

1. ลากและวางเพื่ออ่านเส้นทางไฟล์ใต้แต่ละโฟลเดอร์
2. วิธีการแสดงแถบความคืบหน้าของโฟลเดอร์ที่อัพโหลดในปัจจุบัน
3. การพกพาคุกกี้ข้ามโดเมนเมื่ออัพโหลดไฟล์
4. การกระจายตัวของโฟลเดอร์

เมื่อดำเนินการลากแล้วปล่อย ออบเจ็กต์ DataTransfer จะถูกใช้เพื่อบันทึกข้อมูลที่ลากไปยังเบราว์เซอร์ผ่านการลากแล้วปล่อย สามารถบันทึกข้อมูลตั้งแต่หนึ่งชนิดขึ้นไป ชนิดข้อมูลตั้งแต่หนึ่งชนิดขึ้นไป

 // ลากโฟลเดอร์ dropFolders (e) { e.stopPropagation() e.preventDefault() var items = e.dataTransfer.items for (var i = 0; i < items.length; i++) { var item = items[ i] .webkitGetAsEntry() if (item) { this.checkFolders(item) } }}// ตรวจสอบว่าเป็นโฟลเดอร์ checkFolders (item) { if (item.isDirectory) { this.traverseFileTree(item) } else { this.$alert('รองรับการอัพโหลดโฟลเดอร์เท่านั้น', 'Prompt', { ConfirmButtonText: 'OK' }) }}traverseFileTree (item, path, parentDir ) { path = path ||. '' if (item.isFile) { item.file((file) => { ให้ obj = { ไฟล์: ไฟล์, เส้นทาง: เส้นทาง + file.name, attr: item.attr } this.filesList.push(obj) }) } else if (item.isDirectory) { var dirReader = item.createReader() dirReader.readEntries((entries) => { สำหรับ (ให้ i = 0; i < items.length; i++) { รายการ [i] .attr = item.attr this.traverseFileTree (รายการ [i], เส้นทาง + item.name + '/', temp) } }, ฟังก์ชั่น (e) { console.log(e) }) }}

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

ไฟล์ที่แยกส่วน: หลังจากคำนวณเปอร์เซ็นต์ของแต่ละไฟล์ในไฟล์แล้ว ให้คำนวณเปอร์เซ็นต์ของแต่ละไฟล์ในไฟล์ หลังจากอัปโหลดแต่ละไฟล์สำเร็จแล้ว ให้แก้ไขกระบวนการของโฟลเดอร์

เมื่อเซิร์ฟเวอร์ตั้งค่าส่วนหัวการตอบกลับ

Access-Control-Allow-Origin: คุณต้องระบุชื่อโดเมนที่ชัดเจนซึ่งสอดคล้องกับหน้าเว็บที่ร้องขอและไม่สามารถเป็น * ได้ การควบคุมการเข้าถึง-อนุญาต-ข้อมูลรับรอง: จริง

ตั้งค่าส่วนหัวของคำขอ:

ด้วยข้อมูลประจำตัว: จริง

เติมเงิน:

substr(start [, length ]) ส่งคืนสตริงย่อยของความยาวที่ระบุโดยเริ่มต้นที่ตำแหน่งที่ระบุ

เริ่มต้น: ตัวเลือกที่จำเป็น ตำแหน่งเริ่มต้นของสตริงย่อยที่ต้องการ อักขระตัวแรกในสตริงมีดัชนี 0

ความยาว: ไม่จำเป็น จำนวนอักขระที่ควรรวมไว้ในสตริงย่อยที่ส่งคืน

สตริงย่อยส่งคืนสตริงย่อยที่อยู่ในตำแหน่งที่ระบุในวัตถุ String ส่งคืนสตริงที่มีสตริงย่อยตั้งแต่ต้นจนจบ (ไม่รวมจุดสิ้นสุด)

start: ระบุตำแหน่งเริ่มต้นของสตริงย่อย และดัชนีเริ่มต้นจาก 0

end: ระบุตำแหน่งสิ้นสุดของสตริงย่อย ดัชนีเริ่มต้นจาก 0

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