在 JavaScript 中实例化文件对象

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中实例化文件对象

作者：迹忆客最近更新：2023/03/10 浏览次数：

一个文件由多个分类的数据类型组成，类似于 blob。同样，文件可以具有特定类型的文档。

我们可以在一个文件中存储 blob、string、array 等等。通常，所有这些项目都在一个对象中定义，然后在实例化时打包为文件。

在这里，我们将做类似的事情，并将演示如何访问和显示这个包，也就是文件的详细信息。前面的任务是生成一个我们想要作为文件实例化的对象。

稍后，我们将使用一些方法来确定文件的类型、名称和大小。我们还将使用 FileReader() 访问我们的文件堆栈详细信息。

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 以预览详细信息。最终，我们得到文件名、文件内元素的大小、类型和修改日期。

即使你在第一个文件构造函数参数中不使用数组格式，它仍然可以正常工作。

在这里，我们将图像作为我们的 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;