在 JavaScript 中例項化檔案物件
Anika Tabassum Era
2023年1月30日
2022年5月5日
一個檔案由多個分類的資料型別組成,類似於 blob
。同樣,檔案可以具有特定型別的文件。
我們可以在一個檔案中儲存 blob
、string
、array
等等。通常,所有這些專案都在一個物件中定義,然後在例項化時打包為檔案。
在這裡,我們將做類似的事情,並將演示如何訪問和顯示這個包,也就是檔案的詳細資訊。前面的任務是生成一個我們想要作為檔案例項化的物件。
稍後,我們將使用一些方法來確定檔案的型別、名稱和大小。我們還將使用 FileReader()
訪問我們的檔案堆疊詳細資訊。
在 JavaScript 中為各種資料型別例項化檔案
W3C 檔案 API 規範描述了一個檔案建構函式,它至少有 2 個引數(第 3 個引數可以是可選的)。因此,引數是陣列形式的資料或物件,我們要選擇的檔名,最後以物件格式新增檔案型別和修改日期。
這個例子將有 fileDetail
,資料堆有兩個字串和兩個陣列規範。然後我們將例項化 File
建構函式並操作 DOM 以顯示檔案的大小、型別和名稱。
讓我們跳到程式碼塊。
程式碼片段:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
</body>
</html>
const fileDetail = [
'It\'s a simple string and each character will be countded in the size',
'Second String',
new Uint8Array([10]),
new Uint32Array([2]),
];
const file = new File([fileDetail], 'file.txt', {
lastModified: new Date(2022, 0, 5),
type: "text/string and array"
});
const fr = new FileReader();
fr.onload = (evt) => {
document.body.innerHTML = `
<p>file name: ${file.name}</p>
<p>file size: ${file.size}</p>
<p>file type: ${file.type}</p>
<p>file last modified: ${new Date(file.lastModified)}</p> `
}
fr.readAsText(file);
輸出:
如你所見,fileDetail
物件包含兩個字串,每個字元將佔用記憶體中的 1 位元組空間。
當我們生成 8 位陣列時,也將佔用 1 個位元組,但在 32 位陣列的情況下,它將佔用 4 個位元組的空間。在例項化 File constructor
之後,將建立一個名為 file
的例項。
下一步為 FileReader
獲取另一個例項,onload 方法
操作 DOM
以預覽詳細資訊。最終,我們得到檔名、檔案內元素的大小、型別和修改日期。
即使你在第一個檔案建構函式引數中不使用陣列格式,它仍然可以正常工作。
在 JavaScript 中獲取用於檔案例項化的影象
在這裡,我們將影象作為我們的 fil 元素並檢查其型別。在這種情況下,檔案的大小將是影象名稱的字元。
稍後我們將顯示有關該檔案的資料。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="orange.jpg">
<p id="size"></p>
<p id="type"></p>
<p id="name"></p>
</body>
</html>
var file = new File(['orange'],
'orange.jpg',
{type:'image/jpg'});
document.getElementById("size").innerHTML = "File size: " + file.size;
document.getElementById("type").innerHTML = "File type: " + file.type;
document.getElementById("name").innerHTML = "File name: " + file.name;
輸出:
Author: Anika Tabassum Era