บทความนี้จะแนะนำวิธีการแปลงเส้นทางสัมบูรณ์ของรูปภาพให้เป็นวัตถุไฟล์ใน HTML5 และแบ่งปันกับทุกคน โดยมีรายละเอียดดังนี้:
หากต้องการแปลงเส้นทางสัมบูรณ์ของรูปภาพเป็นการเข้ารหัส base64 โปรดดูบทความนี้
ก่อนอื่นเรามาทำความเข้าใจประเด็นความรู้พื้นฐานกันก่อน:
1. ทำความเข้าใจวัตถุ FileList และวัตถุไฟล์ใน HTML5ใน HTML5 วัตถุ FileList แสดงรายการไฟล์ที่เลือกโดยผู้ใช้ โดยการเพิ่มแอตทริบิวต์ multipe คุณสามารถเลือกหลายไฟล์พร้อมกันภายในการควบคุมไฟล์ แต่ละไฟล์ที่ผู้ใช้เลือกในตัวควบคุมเป็นวัตถุไฟล์ และวัตถุ FileList คือรายการของวัตถุไฟล์ แสดงถึงไฟล์ทั้งหมดที่ผู้ใช้เลือก ก่อนอื่นเรามาดูตัวอย่างง่ายๆ กันก่อนเพื่อดูว่าออบเจ็กต์ไฟล์มีคุณลักษณะใดบ้าง รหัสต่อไปนี้:
<!DOCTYPE html><html> <head> <title>ระบบไฟล์:URL</title> </head> <body> <div> <label>เลือก:</label> <input type='file' multiple id= ไฟล์ /> <input type=button value=การอัพโหลดไฟล์ onClick=showFile() /> </div> <script> function showFile() { var files = document.getElementById('file').files; // ส่งคืนไฟล์ที่เลือกทั้งหมดสำหรับ (var i = 0, ilen = files.length; i < ilen; i++) { // พิมพ์ข้อมูลของอ็อบเจ็กต์ไฟล์เดียว console.log(files[i]); /* พิมพ์ The ข้อมูลมีดังนี้: ไฟล์ { LastModified: 1457946612000 LastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {} ชื่อ: test.html ขนาด: 796 ประเภท: text/html webkitRelativePath: */ /* หากรูปภาพถูกอัปโหลด ข้อมูลต่อไปนี้จะถูกส่งกลับ: ไฟล์ { LastModified: 1466907500000 LastModifiedDate: Sun Jun 26 2016 10 : 18:20 GMT+0800 (CST) {} ชื่อ: a.jpg ขนาด: 23684 type: image/jpeg webkitRelativePath: } */ /* ดังนั้น หากคุณต้องการตรวจสอบว่าไฟล์ที่อัพโหลดเป็นไฟล์รูปภาพหรือไม่ คุณสามารถตัดสินตามประเภทได้ดังต่อไปนี้: var file = files[i]; /image// /w+/.test(file.type)) { console.log('ไฟล์นี้ไม่ใช่ไฟล์รูปภาพ'); } else { console.log('ไฟล์นี้เป็นไฟล์รูปภาพ'); แต่ถ้าคุณต้องการถ่ายโอนรูปภาพเท่านั้น คุณสามารถเพิ่มแอตทริบิวต์ Accept=image/* ให้กับตัวควบคุมรูปภาพได้ เราสามารถเขียนโค้ดได้ดังนี้: <input type='file' multiple Accept = 'image/gif,image/jpeg ,รูปภาพ/ jpg,รูปภาพ/png' /> */ } } </script> </body></html> 2. ทำความเข้าใจกับวัตถุ Blobประเด็นสำคัญ: ใน HTML5 มีการเพิ่มวัตถุ Blob ใหม่เพื่อแสดงข้อมูลไบนารีดั้งเดิม
วัตถุ Blob มีสองแอตทริบิวต์ แอตทริบิวต์ size แสดงถึงความยาวไบต์ของวัตถุ Blob และแอตทริบิวต์ type แสดงถึงประเภท MIME ของ Blob
โปรดดูรหัสต่อไปนี้:
<!DOCTYPE html><html> <head> <title>ระบบไฟล์:URL</title> </head> <body> <div> <label>เลือกไฟล์:</label> <input type=file id=file / > <input type=button value=แสดงข้อมูลไฟล์ onClick=showFileType() /> <p>ความยาวไบต์ของไฟล์: <span id=size></span></p> <p>ประเภทไฟล์: <span id=type></span></p> </div> <script> function showFileType() { var file; // รับไฟล์แรกที่ผู้ใช้เลือก file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); // แสดงความยาวของไฟล์เป็นไบต์ size.innerHTML = file.size; แสดงประเภทของไฟล์ type.innerHTML = file.type; // เปิดคอนโซลเพื่อดูออบเจ็กต์ไฟล์ที่ส่งคืน console.log(file); } </script> </body></html>หมายเหตุ: Blob และ File สามารถใช้พร้อมกันได้ และ FileReader สามารถใช้อ่านข้อมูลจาก Blob ได้
ต่อไปนี้เป็นที่อยู่รูปภาพเส้นทางสัมบูรณ์ที่ถูกแปลงเป็นรูปภาพที่เข้ารหัส base64 จากนั้นรูปภาพที่เข้ารหัส base64 จะถูกแปลงเป็นวัตถุหยด รหัสมีดังนี้:
<!DOCTYPE html><html> <head> <title>แปลงข้อมูล URL รูปภาพ base64 เป็น Blob</title> </head> <body> <script> /** * แปลงข้อมูล URL รูปภาพ base64 สำหรับ Blob * @param urlData * ข้อมูลภาพ base64 แสดงในโหมด url */ ฟังก์ชั่น ConvertBase64UrlToBlob(base64){ var urlData = base64.dataURL; var type = base64.type; var bytes = window.atob(urlData.split(',')[1]); //ลบส่วนหัวของ url และแปลงเป็นไบต์ //จัดการข้อยกเว้นและแปลงโค้ด ascii น้อยกว่า 0 เป็น มากกว่า 0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } ส่งคืน Blob ใหม่ ( [ab] , {type : type} } /* * แปลงที่อยู่พาธสัมบูรณ์ของรูปภาพเป็นการเข้ารหัส base64 ดังนี้: */ function getBase64Image(img) { var canvas = document.createElement(canvas); canvas.width = img.width; canvas.height = var ctx = canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(.)+1).toLowerCase() ; var dataURL = canvas.toDataURL(image/+ext); return { dataURL: dataURL, ประเภท: รูปภาพ/+ต่อ }; var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXbXFXXSutbFXXX.jpg; var image = รูปภาพใหม่ (); image.src = img; (){ var base64 = getBase64Image(รูปภาพ); console.log(base64); ข้อมูลการพิมพ์มีดังนี้: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = ConvertBase64UrlToBlob(base64); console.log(img2); /* ข้อมูลการพิมพ์มีดังนี้ : Blob {ขนาด: 9585 ประเภท: image/jpg} */ } </script> </body></html>หมายเหตุ: ใน HTML5 วัตถุ Blob ใหม่จะถูกเพิ่มเพื่อแสดงข้อมูลไบนารีดั้งเดิม ที่จริงแล้ว วัตถุไฟล์ยังสืบทอดวัตถุ Blob อีกด้วย ดังนั้นเราจึงสามารถใช้ที่อยู่ที่แน่นอนของรูปภาพเพื่อแปลงเป็นวัตถุไฟล์ได้
ดังนั้นเราจึงสามารถใช้ที่อยู่ที่แน่นอนของรูปภาพเพื่อแปลงเป็นออบเจ็กต์ไฟล์ได้ สำหรับการสาธิตโดยละเอียด คุณสามารถดูส่วนควบคุมการอัปโหลดรูปภาพบน git ของฉันได้ในตอนแรกรองรับการอัปโหลดรูปภาพ แล้วทันใดนั้นฉันก็พบสิ่งนั้น เมื่อฉันไปที่หน้าแก้ไข ฉันต้องแสดงรูปภาพเริ่มต้น คุณยังสามารถอัปโหลดรูปภาพใหม่ต่อเมื่อแสดงรูปภาพตามค่าเริ่มต้น หรือจะลบรูปภาพทั้งหมดก็ได้ ฉันคือที่อยู่ที่แน่นอนของรูปภาพ ดังนั้นฉันจึงสงสัยว่าจะแปลงที่อยู่ที่แน่นอนของรูปภาพให้เป็นวัตถุไฟล์ได้อย่างไร ถ้าฉันไม่แปลงถ้ามันกลายเป็นวัตถุไฟล์ เมื่อใช้รหัสนี้ var reader = new FileReader(); จะรายงานข้อผิดพลาด ดังนั้นคุณสามารถใช้วัตถุหยดที่เราพูดถึงข้างต้นเพื่อแปลงเป็นวัตถุหยดก่อน จากนั้นคุณสามารถใช้วัตถุการดำเนินการไฟล์ fileReader
สำหรับโค้ดโดยละเอียด โปรดดูส่วนควบคุมการอัปโหลดรูปภาพบน git ของฉัน (https://github.com/tugenhua0707/html5UploadImage) สำหรับเอฟเฟกต์ โปรดดู https://tugenhua0707.github.io/html5UploadImage/index.html
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network