HTML DOM FileUpload 对象

HTML DOM FileUpload 对象是通过元素创建的对象，常用于上传文件操作。FileUpload 对象提供了一些方法和属性，使得开发者可以获取上传的文件信息，包括文件名、大小、类型等等。

创建FileUpload对象

FileUpload对象可以通过HTML元素创建。在文本编辑器中，你可以像下面这样创建一个HTML表单。

<form>
  <label for="file-select">选择文件:</label>
  <input type="file" id="file-select" name="file-select">
</form>

可以通过以下代码获取文件上传对象。

var fileInput = document.getElementById("file-select");

FileUpload 对象方法

getFiles()

getFiles() 方法返回一个 FileList 对象，其中包含了用户选择的文件列表。

var fileInput = document.getElementById("file-select");
var fileList = fileInput.files;

clear()

clear() 方法清空文件上传控件。

var fileInput = document.getElementById("file-select");
fileInput.value = ""; // 置空文件上传控件的值

FileUpload 对象属性

name

name 属性返回文件上传控件的名称。

var fileInput = document.getElementById("file-select");
var name = fileInput.name;

type

type 属性返回选中文件的MIME类型。

var fileInput = document.getElementById("file-select");
var type = fileInput.files[0].type;

size

size 属性返回文件的大小（以字节为单位）。

var fileInput = document.getElementById("file-select");
var size = fileInput.files[0].size;

lastModified

lastModified 属性返回文件最后修改的Unix时间戳（1970年1月1日以来的毫秒数）。

var fileInput = document.getElementById("file-select");
var lastModifed = fileInput.files[0].lastModified;

lastModifiedDate

lastModifiedDate 属性返回文件最后修改的时间戳对象。

var fileInput = document.getElementById("file-select");
var lastModifedDate = fileInput.files[0].lastModifiedDate;

value

value 属性返回文件上传控件的值。

var fileInput = document.getElementById("file-select");
var value = fileInput.value;

事件处理

FileUpload 对象的 change 事件会在用户上传文件更改时被触发。以下示例会在用户上传文件之后显示所上传文件的名称和大小。

<input type="file" id="file-select" onchange="showFileInfo()">

function showFileInfo() {
  var fileInput = document.getElementById("file-select");
  var file = fileInput.files[0];
  console.log("文件名：" + file.name);
  console.log("文件大小：" + file.size + " bytes");
}

结论

HTML DOM FileUpload对象是通过元素创建的对象，可以获取上传的文件信息，包括文件名、大小、类型等等。通过提供的方法和属性，用户能够在上传文件时进行一些控制和处理。同时，FileUpload 对象还支持一些事件，例如 change 和 click 事件，用户可以在这些事件中定制自己的逻辑，实现更加复杂的文件上传操作。

HTML DOM Fieldset 对象 HTML DOM Form 对象