HTML | DOM 输入文件上传表单属性

在Web开发中，经常需要在页面中添加文件上传表单。HTML提供了<input>标签用于实现文件上传功能。本文将介绍如何在表单中添加文件上传功能以及该属性的DOM操作。

HTML文件上传表单

使用<input>标签来实现文件上传功能，需要使用type="file"属性，如下所示:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Select file:</label>
  <input type="file" id="file" name="file"><br><br>
  <input type="submit" value="Upload">
</form>

其中，enctype="multipart/form-data"是必须的属性，它指定了表单数据的编码类型。

上述代码片段中，<input>标签的type属性值是"file"，这表示文件上传类型。id属性和name属性定义了上传文件的名称。

DOM输入文件上传表单属性

可以使用JavaScript来操作DOM元素并获取文件上传表单的值。在获取表单的值之前，需要准备一个事件句柄，如下所示:

document.getElementById("file").addEventListener("change", function() {
  var file = this.files[0];
  console.log(file);
});

上述代码使用addEventListener()方法为<input>标签添加了一个change事件句柄，当用户选择文件后，这个事件句柄就会被调用。

this.files[0]将返回用户选择的文件对象，通过该对象可以获取文件的名称、大小、类型等信息。

总结

文件上传表单是Web开发中常见的功能，HTML提供了<input>标签来实现该功能。可以使用JavaScript来操作DOM元素并获取文件上传表单的值。在使用该属性时，需要注意表单数据的编码类型。