โดยวิธีการวันนี้ฉันเพิ่งเรียกดูซอร์สโค้ดของ Proxy Switchysharp และได้รับสิ่งต่าง ๆ มากมายรวมถึงการอ่านและบันทึกไฟล์ที่จะแนะนำในบทความนี้
เนื่องจาก Google ไม่ได้จัดเตรียมฟังก์ชั่นของการซิงโครไนซ์ข้อมูลปลั๊กอินการนำเข้าและส่งออกการกำหนดค่าปลั๊กอินจะต้องจัดการกับไฟล์ ด้วยเหตุผลด้านความปลอดภัยเท่านั้น IE เท่านั้นที่ให้ API เพื่อเข้าถึงไฟล์ แต่ด้วยการมาถึงของ HTML 5 เบราว์เซอร์อื่น ๆ ก็สนับสนุนเช่นกัน
ก่อนอื่นมาพูดถึงการอ่านไฟล์ W3C จัดเตรียมไฟล์ APIs ซึ่งสำคัญที่สุดคือคลาส Filereader
ก่อนอื่นแสดงรายการแท็ก HTML ที่คุณต้องการ:
คัดลอกรหัสรหัสดังนี้: <อินพุต type = "ไฟล์" id = "ไฟล์" onChange = "handlefiles (this.files)"/>
เมื่อเลือกไฟล์รายการที่มีไฟล์ (วัตถุ fileList) จะถูกส่งเป็นพารามิเตอร์ไปยังฟังก์ชัน HandleFiles ()
วัตถุ FileList นี้คล้ายกับอาร์เรย์ซึ่งสามารถบอกจำนวนไฟล์และองค์ประกอบของมันคือวัตถุไฟล์
จากวัตถุไฟล์นี้คุณสามารถรับแอตทริบิวต์เช่นชื่อขนาด LastModifiedDate และประเภท
ส่งวัตถุไฟล์นี้ไปยังวิธีการอ่านของวัตถุ FilerEader และคุณสามารถอ่านไฟล์ได้
มี 4 วิธีการอ่านใน filereader:
1. ReadasarrayBuffer (ไฟล์): อ่านไฟล์เป็น ArrayBuffer
2. ReadAsBinaryString (ไฟล์): อ่านไฟล์เป็นสตริงไบนารี
3.readasdataurl (ไฟล์): อ่านไฟล์เป็น URL ข้อมูล
4. readastext (ไฟล์, [การเข้ารหัส]): อ่านไฟล์เป็นข้อความค่าการเข้ารหัสเริ่มต้นคือ 'UTF-8'
นอกจากนี้วิธีการยกเลิก () สามารถหยุดอ่านไฟล์ได้
วัตถุ filereader จะต้องดำเนินการหลังจากอ่านไฟล์ เพื่อไม่ให้บล็อกเธรดปัจจุบัน API ใช้รูปแบบเหตุการณ์ซึ่งสามารถลงทะเบียนเหตุการณ์เหล่านี้ได้:
1.Onabort: ถูกกระตุ้นเมื่อถูกขัดจังหวะ
2.Onerror: ทริกเกอร์เมื่อเกิดข้อผิดพลาด
3.onload: ทริกเกอร์เมื่ออ่านไฟล์ได้สำเร็จ
4.onloadend: ทริกเกอร์เมื่ออ่านไฟล์โดยไม่คำนึงว่าจะล้มเหลวหรือไม่
5.onloadstart: ทริกเกอร์เมื่อไฟล์เริ่มอ่าน
6. กำลังดำเนินการ: ทริกเกอร์เป็นระยะเมื่ออ่านไฟล์
ด้วยวิธีการเหล่านี้คุณสามารถประมวลผลไฟล์ได้
ลองอ่านไฟล์ข้อความก่อน:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น handlefiles (ไฟล์) {
if (files.length) {
ไฟล์ var = ไฟล์ [0];
var reader = new filereader ();
if (/text///w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.result + '</pre>') ภาคผนวก ('ร่างกาย');
-
reader.readastext (ไฟล์);
-
-
-
นี่คือสิ่งที่นี่คือ reader.result ซึ่งเป็นเนื้อหาไฟล์อ่าน
หลังจากการทดสอบคุณจะพบว่าเนื้อหาของไฟล์นี้ถูกเพิ่มลงในหน้าเว็บ หากคุณใช้ Chrome คุณต้องใส่หน้าเว็บบนเซิร์ฟเวอร์หรือในปลั๊กอินและโปรโตคอลไฟล์จะล้มเหลว
ลองรูปภาพอีกครั้งเพราะเบราว์เซอร์สามารถแสดงรูปภาพของโปรโตคอลข้อมูล URI ได้โดยตรงดังนั้นเพิ่มรูปภาพในครั้งนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น handlefiles (ไฟล์) {
if (files.length) {
ไฟล์ var = ไฟล์ [0];
var reader = new filereader ();
if (/text///w+/.test(file.type)) {
reader.onload = function () {
$ ('<pre>' + this.result + '</pre>') ภาคผนวก ('ร่างกาย');
-
reader.readastext (ไฟล์);
} else if (/image /// w+/. test (file.type)) {
reader.onload = function () {
$ ('<img src = "' + this.result + '" />').appendto('body');
-
reader.readasdataurl (ไฟล์);
-
-
-
อันที่จริงแล้วการควบคุมไฟล์อินพุต: ยังรองรับการเลือกหลายไฟล์:
การคัดลอกรหัสมีดังนี้:
<input type = "file" id = "files" multriay = "" onchange = "handlefiles (this.files)"/>
ด้วยวิธีนี้ HandleFiles () จะต้องข้ามไปยังการประมวลผลไฟล์
หากคุณต้องการอ่านเพียงบางส่วนของข้อมูลวัตถุไฟล์ยังมีวิธีการ webkitslice () หรือ mozslice () ซึ่งใช้ในการสร้างวัตถุ Blob วัตถุนี้สามารถอ่านได้โดย filereader เช่นเดียวกับวัตถุไฟล์ ทั้งสองวิธีนี้ได้รับพารามิเตอร์ 3 ตัว: พารามิเตอร์แรกคือตำแหน่งเริ่มต้น ประการที่สองคือตำแหน่งสุดท้ายและเมื่อละเว้นจุดสิ้นสุดของไฟล์จะถูกอ่าน; ที่สามคือประเภทเนื้อหา
ตัวอย่างโปรดดูที่ "การอ่านไฟล์โลคัลใน JavaScript"
แน่นอนนอกเหนือจากการนำเข้าข้อมูลและการแสดงไฟล์แล้วยังสามารถใช้สำหรับการอัปโหลด AJAX รหัสสามารถใช้เพื่ออ้างถึง "การใช้ไฟล์จากเว็บแอปพลิเคชัน"
ถัดไปบันทึกไฟล์
ในความเป็นจริงไฟล์ API: Writer ให้ 4 อินเทอร์เฟซ แต่ปัจจุบันมีเพียงเบราว์เซอร์บางส่วน (Chrome 8+ และ Firefox 4+) ใช้งาน Blobbuilder และส่วนที่เหลือของอินเตอร์เฟสไม่สามารถใช้ได้
สำหรับเบราว์เซอร์ที่ไม่ได้รับการสนับสนุนคุณสามารถใช้ blobbuilder.js และ filesaver.js เพื่อรับการสนับสนุน
ฉันศึกษาและค้นพบความลึกลับ
Blobbuilder สามารถสร้างวัตถุหยดได้ ส่งผ่านวัตถุหยดนี้ไปยังวิธี url.createObjecturl () และคุณสามารถรับ URL วัตถุ และ URL วัตถุนี้เป็นที่อยู่ดาวน์โหลดของวัตถุ Blob นี้
หลังจากได้รับที่อยู่ดาวน์โหลดแล้วให้สร้างองค์ประกอบ A กำหนดที่อยู่ดาวน์โหลดให้กับแอตทริบิวต์ HREF และกำหนดชื่อไฟล์ให้กับแอตทริบิวต์ดาวน์โหลด (สนับสนุนโดย Chrome 14+)
จากนั้นสร้างเหตุการณ์คลิกและส่งมอบให้กับองค์ประกอบนี้เพื่อประมวลผลซึ่งจะทำให้เบราว์เซอร์เริ่มดาวน์โหลดวัตถุ Blob
ในที่สุดใช้ url.revokeobjecturl () เพื่อปล่อย URL วัตถุแจ้งเบราว์เซอร์ว่าไม่จำเป็นต้องอ้างอิงไฟล์ต่อไป
นี่คือรหัสที่เรียบง่าย:
การคัดลอกรหัสมีดังนี้:
var blobbuilder = blobbuilder || WebKitBlobBuilder || Mozblobbuilder;
var url = url || WebKiturl || หน้าต่าง;
ฟังก์ชั่น saveas (blob, filename) {
var type = blob.type;
var force_savable_type = 'application/octet-stream';
if (type && type! = force_savable_type) {// force ดาวน์โหลดไม่เปิดในเบราว์เซอร์
var slice = blob.slice || Blob.webkitslice || Blob.mozslice;
blob = slice.call (blob, 0, blob.size, force_savable_type);
-
var url = url.createObjecturl (blob);
var save_link = document.createelementns ('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = ชื่อไฟล์;
var event = document.createeevent ('MouseEvents');
event.initmousevent ('คลิก', จริง, เท็จ, หน้าต่าง, 0, 0, 0, 0, 0, เท็จ, เท็จ, เท็จ, เท็จ, เท็จ, 0, null);
save_link.dispatchevent (เหตุการณ์);
url.revokeobjecturl (url);
-
var bb = ใหม่ blobbuilder;
bb.append ('สวัสดีโลก!');
Saveas (bb.getBlob ('text/plain; charset = utf-8'), 'hello world.txt');
ไฟล์ข้อความจะได้รับแจ้งให้บันทึกระหว่างการทดสอบ Chrome จำเป็นต้องวางเว็บเพจบนเซิร์ฟเวอร์หรือในปลั๊กอิน