มีวัตถุไฟล์ในจาวาสคริปต์หรือไม่?

มีวัตถุไฟล์ใน JavaScript วัตถุไฟล์แสดงถึงไฟล์และใช้ในการอ่านและเขียนข้อมูลไฟล์ สามารถใช้วัตถุ Blob ได้ มันสามารถใช้ตัวสร้าง "ไฟล์ใหม่ (fileParts, ชื่อไฟล์, [ตัวเลือก])" เพื่อรับวัตถุไฟล์

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, JavaScript เวอร์ชัน 1.8.5, คอมพิวเตอร์ Dell G3

มีวัตถุไฟล์ในจาวาสคริปต์

วัตถุไฟล์

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

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

// รหัส HTML เป็นดังนี้ // <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];file instanceof File // true

ในโค้ดข้างต้น file คือไฟล์แรกที่ผู้ใช้เลือก ซึ่งเป็นอินสแตนซ์ของ File

ตัวสร้าง

เบราว์เซอร์มีตัวสร้าง File() เพื่อสร้างออบเจ็กต์อินสแตนซ์ไฟล์

ไฟล์ใหม่ (อาร์เรย์, ชื่อ [, ตัวเลือก])

ตัวสร้าง File() ยอมรับพารามิเตอร์สามตัว

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

ชื่อ: สตริง แทนชื่อไฟล์หรือเส้นทางของไฟล์

ตัวเลือก: วัตถุการกำหนดค่า ตั้งค่าคุณสมบัติของอินสแตนซ์ พารามิเตอร์นี้เป็นทางเลือก

พารามิเตอร์ตัวที่สามกำหนดค่าออบเจ็กต์และสามารถตั้งค่าคุณสมบัติได้สองรายการ

ประเภท: สตริง ซึ่งระบุประเภท MIME ของออบเจ็กต์อินสแตนซ์ ค่าเริ่มต้นคือสตริงว่าง

LastModified: การประทับเวลา ซึ่งระบุเวลาที่แก้ไขครั้งล่าสุด ค่าเริ่มต้นคือ Date.now()

ด้านล่างนี้เป็นตัวอย่าง

ไฟล์ var = ไฟล์ใหม่ (['foo'], 'foo.txt', { ประเภท: 'ข้อความ/ธรรมดา', });

คุณสมบัติอินสแตนซ์และวิธีการอินสแตนซ์

วัตถุไฟล์มีคุณสมบัติอินสแตนซ์ดังต่อไปนี้

File.lastModified: เวลาที่แก้ไขล่าสุด

File.name: ชื่อไฟล์หรือเส้นทางของไฟล์

File.size: ขนาดไฟล์ (หน่วยไบต์)

File.type: ประเภท MIME ของไฟล์

var myFile = ไฟล์ใหม่ ([], 'file.bin', { LastModified: วันที่ใหม่ (2018, 1, 1),}); myFile.lastModified // 1517414400000myFile.name // "file.bin"myFile.size / / 0myFile.type // ""

ในโค้ดข้างต้น เนื่องจากเนื้อหาของ myFile ว่างเปล่าและไม่ได้ตั้งค่าประเภท MIME แอตทริบิวต์ size จึงเท่ากับ 0 และแอตทริบิวต์ type จะเท่ากับสตริงว่าง

อ็อบเจ็กต์ File ไม่มีเมธอดอินสแตนซ์ของตัวเอง เนื่องจากมันสืบทอดอ็อบเจ็กต์ Blob คุณจึงสามารถใช้เมธอด Blob instance ได้

ขยายความรู้ของคุณ:

มีสองวิธีในการรับมัน

อันแรกคล้ายกับ Blob มีตัวสร้าง:

ไฟล์ใหม่ (fileParts, ชื่อไฟล์, [ตัวเลือก])

fileParts - อาร์เรย์ของค่าประเภท Blob/BufferSource/String

fileName - สตริงชื่อไฟล์

ตัวเลือก - วัตถุเสริม:

LastModified - การประทับเวลาของการแก้ไขครั้งล่าสุด (วันที่จำนวนเต็ม)

ประเภทที่สอง แท็กอินพุต

โดยทั่วไปแล้ว เราได้รับไฟล์จาก <input type="file"> หรือการลากและวางหรืออินเทอร์เฟซเบราว์เซอร์อื่นๆ ในกรณีนี้ไฟล์จะได้รับข้อมูลนี้จากระบบปฏิบัติการ (OS)

เนื่องจาก File สืบทอดมาจาก Blob วัตถุ File จึงมีคุณสมบัติเหมือนกัน บวกด้วย:

ชื่อ - ชื่อไฟล์, LastModified - การประทับเวลาของการแก้ไขครั้งล่าสุด

นี่คือวิธีที่เราได้รับวัตถุ File จาก <input type="file">:

<input type="file" onchange="showFile(this)"><script>function showFile(input) { la file = input.files[0]; alert(`ชื่อไฟล์: ${file.name}`); // ตัวอย่าง my.png alert(`Last modified: ${file.lastModified}`); // เช่น 1552830408824}</script>

รายละเอียด: โปรดทราบ:

อินพุตสามารถเลือกได้หลายไฟล์ ดังนั้น input.files จึงเป็นออบเจ็กต์ที่มีลักษณะคล้ายอาร์เรย์ ที่นี่เรามีไฟล์เดียวเท่านั้น ดังนั้นเราจึงใช้ input.files[0]