在 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