JavaScript获取上传文件相关信息示例详解

2023年5月27日上午9:50 • JavaScript

让我详细讲解一下“JavaScript获取上传文件相关信息示例详解”。

1. 背景介绍

在前端开发中，有时需要上传文件，比如上传图片、上传文档等。上传文件时，我们需要获取文件的相关信息，比如文件名称、文件大小、文件类型等信息。

在本文中，我们将通过两条 JavaScript 示例详细讲解如何获取上传文件的相关信息。

2. 示例1：使用FileReader对象获取上传文件信息

FileReader对象是HTML5中新增的一个用于文件读取的API，我们可以使用它获取上传文件的相关信息。

2.1 HTML代码

首先，我们需要在HTML中添加一个input标签作为文件上传的入口，代码如下：

<input type="file" id="fileInput" />

2.2 JavaScript代码

接下来，我们使用JavaScript代码获取上传文件的相关信息，代码如下：

const fileInput = document.querySelector('#fileInput');
fileInput.addEventListener('change', function() {
  const file = fileInput.files[0];
  const reader = new FileReader();
  reader.onload = function() {
    const fileInfo = {
      name: file.name,
      size: file.size,
      type: file.type,
      dataUrl: reader.result
    };
    console.log(fileInfo);
  };
  reader.readAsDataURL(file);
});

上面的代码中，我们首先使用document.querySelector方法获取文件上传的input元素，然后给input元素添加了一个change事件监听器。

当文件上传input元素中的内容发生变化时，我们会在回调函数中得到上传的文件对象。接着，我们创建一个FileReader对象，使用它读取文件并将文件信息保存在一个对象中。

最后，我们将这个包含文件信息的对象输出到控制台。

2.3 示例演示

请参考下面的示例演示：

示例演示链接

在打开链接后，选择一个文件并上传，控制台会输出类似下面的信息：

{name: "example.png", size: 136233, type: "image/png", dataUrl: "data:image/png;base64,iVBORw0KG...想象中的很长一段编码}

上面的输出结果包含了上传文件的名称、大小、类型以及base64编码格式的文件内容。

3. 示例2：使用FormData对象获取上传文件信息

FormData对象是用于创建表单数据的一种HTML5 API，它不仅可以用于上传文件，而且可以拦截表单提交，进行Ajax请求，一并处理数据。下面，我们利用它来获取上传文件信息。

3.1 HTML代码

在HTML代码中，我们需要添加一个form标签，将文件上传的input元素放置其中，代码如下：

<form id="myForm">
  <input type="file" id="myFile" name="myFile" />
</form>

3.2 JavaScript代码

接下来，我们使用JavaScript来获取上传文件的相关信息，代码如下：

const form = document.querySelector('#myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(form);
  formData.forEach(function(value, key) {
    console.log(key, value);
  });
});

上面的代码中，我们首先获取表单对象并添加一个submit事件监听器，当表单提交时可以将上传文件的信息获取到。

在表单的submit事件回调函数中，我们使用FormData对象创建了一个新的表单数据对象formData，并使用它的forEach方法遍历了表单中所有的键值对，输出表单项的名称和值。

3.3 示例演示

请参考下面的示例演示：

示例演示链接

在打开链接后，选择一个文件并上传，控制台会输出类似下面的信息：

myFile Object {name: "example.png", lastModified: 1648069264941, lastModifiedDate: Wed Mar 23 2022 23:41:04 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 136233, …}

上面的输出结果包含了上传文件的名称、最后修改时间、文件大小等信息。