HTML | DOM 输入文件上传对象

在Web开发中，有很多情况需要使用到文件上传功能，比如用户上传头像、上传文件等等。在HTML和JavaScript中，我们可以利用DOM操作来获取文件上传对象并进行相应的文件上传操作。

获取文件上传对象

要获取文件上传对象，可以使用HTML中的<input>元素，并将其type属性设置为file：

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

通过使用JavaScript中的document.getElementById()方法或其他选择器，就可以获取到这个<input>元素，再通过它的files属性就可以获取到用户选择的文件。

// 获取文件上传对象
const fileInput = document.getElementById('fileInput');

// 获取用户选择的文件
const selectedFile = fileInput.files[0];

上传文件

要上传文件，需要使用服务器端的API或框架，例如Node.js的express框架。在前端，我们需要使用XMLHttpRequest对象或fetch API发送文件数据到服务器。以下是一个使用XMLHttpRequest上传文件的示例：

const file = selectedFile;
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', file);

// 发送文件数据到服务器
xhr.open('POST', 'http://example.com/upload');
xhr.send(formData);

// 监听上传进度
xhr.upload.addEventListener('progress', (e) => {
  if (e.lengthComputable) {
    const percentComplete = e.loaded / e.total * 100;
    console.log(percentComplete.toFixed(2));
  }
});

// 监听上传完成事件
xhr.addEventListener('load', () => {
  console.log('上传完成！');
});

// 监听上传出错事件
xhr.addEventListener('error', () => {
  console.log('上传出错！');
});

以上示例中，我们使用了XMLHttpRequest对象来发送 FormData 对象，FormData对象是 HTML5 新增的对象，用于序列化表单数据。我们将选中的文件添加到FormData对象中，然后使用xhr.send()方法将FormData对象发送到服务器。在发送时，我们可以监听上传进度、完成和出错事件，以便及时处理上传逻辑。

总结

通过使用HTML和DOM操作，我们可以获取到文件上传对象，并使用XMLHttpRequest或其他API上传文件数据到服务器。这些技术非常重要，因为文件上传功能在许多Web应用程序中都是必须的。