ไฟล์ html5 อัปโหลดรหัสอินสแตนซ์ดาวน์โหลด

ไฟล์ API ที่ให้ไว้ใน HTML5 มีแอปพลิเคชันมากมายในส่วนหน้า และความเข้ากันได้ของแต่ละเบราว์เซอร์ก็ดีขึ้นเช่นเดียวกับเทอร์มินัลมือถือยกเว้น IE รองรับรุ่นของ IE10 หรือสูงกว่าเท่านั้น หากคุณต้องการควบคุมฟังก์ชั่นของไฟล์การทำงานให้ดีขึ้นคุณต้องทำความคุ้นเคยกับ API ทุกครั้งก่อน

ฉลากอินพุต [type = file] ใน HTML มีหลายแอตทริบิวต์ช่วยให้ผู้ใช้สามารถเลือกหลายไฟล์และวัตถุ FileList หมายถึงรายการไฟล์ที่ผู้ใช้เลือก แต่ละไฟล์ในรายการนี้เป็นวัตถุไฟล์

1. แอตทริบิวต์ของวัตถุไฟล์:
2. ชื่อ: ชื่อไฟล์ไม่รวมพา ธ
3. ประเภท: ประเภทไฟล์ ไฟล์ประเภทไฟล์จะเริ่มต้นด้วย image/ซึ่งสามารถ จำกัด เฉพาะการอัปโหลดของรูปภาพ
4. ขนาด: ขนาดไฟล์ การดำเนินการอื่น ๆ สามารถทำได้ตามขนาดของไฟล์
5. LastModify: เวลาการแก้ไขสุดท้ายของไฟล์

 <อินพุต Type = File ID = Multiple> <script> var elem = document.getElementById ('ไฟล์'); คือรูปภาพและขนาดไฟล์น้อยกว่า 200kb ถ้า (ไฟล์ [i] .type.indexof ('image/')! == -1 && ไฟล์ [i] .size <204800) {console.log (ไฟล์ [i] .name);}}} </script>

มีแอตทริบิวต์การเข้าถึงในอินพุตที่สามารถใช้เพื่อระบุประเภทไฟล์ที่สามารถส่งโดยการอัปโหลดไฟล์

ยอมรับ = รูปภาพ/* สามารถใช้เพื่อ จำกัด เฉพาะการอัปโหลดรูปแบบภาพ อย่างไรก็ตามมีปัญหาเกี่ยวกับการตอบสนองช้าภายใต้เบราว์เซอร์ WebKit

วิธีแก้ปัญหาคือการเปลี่ยน* ส่งผ่านเป็นประเภท MIME ที่ระบุ

 <input type = file accept = image/gif, image/jpeg, image/jpg, image/png>

วัตถุ Blob เทียบเท่ากับคอนเทนเนอร์ที่สามารถใช้ในการจัดเก็บข้อมูลไบนารี มันมีสองแอตทริบิวต์แอตทริบิวต์ขนาดแสดงถึงความยาวไบต์และแอตทริบิวต์ประเภทแสดงถึงประเภท MIME

วิธีการสร้าง

วัตถุ Blob สามารถสร้างได้โดยใช้ฟังก์ชันการสร้าง blob ()

 var blob = blob ใหม่ (['hello'], {type: text/plain});

พารามิเตอร์แรกในตัวสร้าง Blob คืออาร์เรย์ที่สามารถจัดเก็บวัตถุ ArrayBuffer วัตถุ ArrayBufferView วัตถุ BLOB และสตริง

วัตถุ Blob สามารถส่งคืนวัตถุ Blob ใหม่ผ่านวิธี Slice ()

 var newBlob = blob.slice (0,5, {type: text/plain});

วิธี Slice () ใช้พารามิเตอร์สามตัวเลือกทั้งหมด พารามิเตอร์แรกแสดงถึงตำแหน่งเริ่มต้นของข้อมูลไบนารีในวัตถุ BLOB พารามิเตอร์ที่สองแสดงถึงจุดสิ้นสุดของการจำลองแบบและพารามิเตอร์ที่สามคือประเภท MIME ของวัตถุ Blob

Canvas.toblob () ยังสามารถสร้างวัตถุ Blob ได้ Toblob () ใช้พารามิเตอร์สามตัวแรกคือฟังก์ชันการโทรกลับที่สองคือประเภทรูปภาพค่าเริ่มต้นคือ image/png, ที่สามคือคุณภาพของภาพค่าอยู่ระหว่าง 0 ถึง 1

 var canvas = document.getElementById ('Canvas');

วัตถุ Blod สามารถสร้างที่อยู่เครือข่ายผ่านวัตถุ Window.url รวมกับแอตทริบิวต์ดาวน์โหลดของแท็ก A เพื่อให้ได้ฟังก์ชันไฟล์ดาวน์โหลด

ตัวอย่างเช่นดาวน์โหลด Canvas เป็นไฟล์รูปภาพ

 var canvas = document.getElementById ('Canvas'); var url = url.createObject "blob); var a = document.createElement ('a'); a.download = 'canvas'; a.href = url; // จำลองแท็กเพื่อดาวน์โหลด a.click (); / / / บอกเบราว์เซอร์หลังจากดาวน์โหลด

สตริงยังสามารถบันทึกเป็นไฟล์ข้อความด้วยวิธีการที่คล้ายกัน

วัตถุ filereader ส่วนใหญ่จะใช้เพื่ออ่านไฟล์ลงในหน่วยความจำและอ่านข้อมูลในไฟล์ สร้างวัตถุ filereader โดยการสร้างฟังก์ชัน

 var reader = new filerereader ();

วัตถุมีวิธีการต่อไปนี้:

1. ยกเลิก: การดำเนินการอ่านขัดจังหวะ
2. ReadasarrayBuffer: อ่านเนื้อหาไฟล์ไปยังวัตถุ ArrayBuffer
3. ReadAsBinaryString: อ่านไฟล์เป็นข้อมูลไบนารี
4. ReadasDataUrl: อ่านไฟล์เป็นข้อมูล: รูปแบบ URL
5. Readastext: อ่านไฟล์เป็นข้อความ

แอปพลิเคชันทั่วไปคือการแสดงรูปภาพผ่าน ReadasDataUrl () หลังจากอัปโหลดรูปภาพบนไคลเอนต์

 <input type = file id = ไฟล์ accept = image/jpeg, image/jpg, image/png> <img src = blank.gif id = ตัวอย่าง> <script> var elem = d ('ไฟล์'), img = เอกสาร GetElementById ('Preview'); .src = ev.target.result;} reader.readasdataurl (ไฟล์ [0]);}} </script>

อย่างไรก็ตามเมื่อคุณถ่ายภาพบนโทรศัพท์มือถือบางรุ่นจะมีข้อบกพร่องเมื่ออัปโหลดรูปภาพและจะพบภาพถ่ายรวมถึง Samsung และ iPhone แก่นแท้ แก่นแท้ โซลูชันไม่ได้อธิบายที่นี่

readastext () ของวัตถุ filereader สามารถอ่านข้อความของไฟล์รวมกับฟังก์ชั่นของวัตถุ Blob เพื่อดาวน์โหลดไฟล์จากนั้นไฟล์ส่งออกข้อมูลจะถูกสำรองข้อมูลไปยังพื้นที่ท้องถิ่น ผ่านอินพุตและใช้ readastext () เพื่อใช้ readastext () อ่านข้อความและกู้คืนข้อมูล

รหัสคล้ายกับฟังก์ชั่นข้างต้นอย่าทำซ้ำที่นี่

วิธีการ ATOB และ BTOA จะถูกเพิ่มลงใน HTML5 เพื่อรองรับการเข้ารหัส BASE64 การตั้งชื่อของพวกเขานั้นง่ายมาก

 var a = https: //lin-xin.github.io; iconsole.log (b);

วิธี BTOA เข้ารหัสสตริง A ซึ่งจะไม่เปลี่ยนค่าของ A และส่งคืนค่าหลังจากการเข้ารหัส

วิธี ATOB ถอดรหัสสตริงที่เข้ารหัส

อย่างไรก็ตามภาษาจีนในพารามิเตอร์ได้เกินช่วงอักขระของการเข้ารหัส ASCII 8 บิตและเบราว์เซอร์จะรายงานข้อผิดพลาด ดังนั้นคุณต้องเข้ารหัส encodeuricomponent ก่อน

 VAR A = Hello World;

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้