在 JavaScript 中例項化檔案物件
Anika Tabassum Era
2023年10月12日
一個檔案由多個分類的資料型別組成，類似於 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;
輸出：
