1. ไฟล์ API
HTML5 มีสองวิธี: ไฟล์และ filereader ซึ่งสามารถอ่านข้อมูลไฟล์และอ่านไฟล์
2. ตัวอย่าง
<html> <body> <div id = "test-image-preview" style = "border: 1px solid rgb (204, 204, 204); ความกว้าง: 100%; ความสูง: 200px; พื้นหลังขนาด: มีการตอบสนองพื้นหลัง type = "file" id = "test-image-file"> <script type = "text/javascript"> var fileinput = document.getElementById ('test-image-file'), info = document.getElementById ('test-file-info') ฟังก์ชั่น () {// clear background image: preview.style.backgroundroundimage = ''; // ตรวจสอบว่าไฟล์ถูกเลือก: ถ้า (! + ขนาด: ' + file.size +' <br> ' +' แก้ไข: ' + file.lastmodifieddate; filereader (); reader.readasdataUrl (ไฟล์);}); </script> </body> </html>ไฟล์ที่อ่านในรูปแบบของ dataurl เป็นสตริงคล้ายกับข้อมูล: image/jpeg; base64,/9j/4aaqsk ... (การเข้ารหัส Base64) ...
ใช้กันทั่วไปในการตั้งค่าภาพ หากจำเป็นต้องมีการประมวลผลฝั่งเซิร์ฟเวอร์ให้ส่งสตริง Base64 และอักขระต่อไปนี้ไปยังเซิร์ฟเวอร์และถอดรหัสด้วย Base64 เพื่อรับเนื้อหาไบนารีของไฟล์ต้นฉบับ
3. คำอธิบาย
รหัสข้างต้นยังแสดงให้เห็นถึงคุณสมบัติที่สำคัญของ JavaScript ซึ่งเป็นโหมดการดำเนินการแบบเธรดเดี่ยว ใน JavaScript เอ็นจิ้นการดำเนินการ JavaScript ของเบราว์เซอร์จะดำเนินการในโหมดเธรดเดี่ยวเสมอเมื่อเรียกใช้รหัส JavaScript ซึ่งหมายความว่าในเวลาใดก็ได้มันเป็นไปไม่ได้ที่รหัส JavaScript จะมีเธรดมากกว่า 1 รายการในเวลาเดียวกัน
คุณอาจถามว่าจะจัดการมัลติทาสกิ้งในโหมดเดี่ยวได้อย่างไร?
ใน JavaScript การทำงานหลายอย่างถูกเรียกแบบอะซิงโครนัสเช่นรหัสข้างต้น:
reader.readasdataurl (ไฟล์);
การดำเนินการแบบอะซิงโครนัสจะเริ่มอ่านเนื้อหาไฟล์ เนื่องจากเป็นการดำเนินการแบบอะซิงโครนัสเราจึงไม่ทราบว่าการดำเนินการสิ้นสุดลงในรหัส JavaScript ดังนั้นเราจึงต้องตั้งค่าฟังก์ชั่นการโทรกลับก่อน:
reader.onload = function (e) {// เมื่ออ่านไฟล์ฟังก์ชั่นนี้เรียกโดยอัตโนมัติ:};เมื่อไฟล์อ่านเสร็จสิ้นแล้วเอ็นจิ้น JavaScript จะเรียกใช้ฟังก์ชันการโทรกลับที่เราตั้งไว้โดยอัตโนมัติ เมื่อมีการเรียกใช้ฟังก์ชันการเรียกกลับไฟล์จะได้รับการอ่านดังนั้นเราจึงสามารถรับเนื้อหาไฟล์ภายในฟังก์ชันการโทรกลับได้อย่างปลอดภัย
ตัวอย่างง่าย ๆ ข้างต้นของการแสดงตัวอย่างของไฟล์อัปโหลด JS คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น