在 JavaScript 中例項化檔案物件

Anika Tabassum Era 2023年1月30日 2022年5月5日
  1. 在 JavaScript 中為各種資料型別例項化檔案
  2. 在 JavaScript 中獲取用於檔案例項化的影象
在 JavaScript 中例項化檔案物件

一個檔案由多個分類的資料型別組成,類似於 blob。同樣,檔案可以具有特定型別的文件。

我們可以在一個檔案中儲存 blobstringarray 等等。通常,所有這些專案都在一個物件中定義,然後在例項化時打包為檔案。

在這裡,我們將做類似的事情,並將演示如何訪問和顯示這個包,也就是檔案的詳細資訊。前面的任務是生成一個我們想要作為檔案例項化的物件。

稍後,我們將使用一些方法來確定檔案的型別、名稱和大小。我們還將使用 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);

輸出:

file_multiple_item

如你所見,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;

輸出:

影象檔案

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相關文章 - JavaScript File