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

在HTML中，我们可以使用<input>元素来实现文件上传功能。<input>元素的type属性设置为file即可创建文件上传控件。当用户选择文件后，可以通过JavaScript的DOM操作获取上传的文件的相关信息，包括文件名、大小、类型等。

获取文件名

文件名是用户上传文件时使用的文件名，可以通过File对象的name属性获取。

// 获取上传文件的文件名
var file = document.getElementById("upload").files[0];
var fileName = file.name;
console.log(fileName);

在上述代码中，我们通过getElementById方法获取到文件上传控件的元素，然后使用files属性获取到用户选择的文件列表，从中获取到第一个文件对象file，最后通过name属性获取到文件名。

获取文件大小

文件大小是指文件的字节数，可以通过File对象的size属性获取。

// 获取上传文件的文件大小
var file = document.getElementById("upload").files[0];
var fileSize = file.size;
console.log(fileSize);

在上述代码中，我们通过getElementById方法获取到文件上传控件的元素，然后使用files属性获取到用户选择的文件列表，从中获取到第一个文件对象file，最后通过size属性获取到文件大小。

获取文件类型

文件类型是指文件的MIME类型，可以通过File对象的type属性获取。

// 获取上传文件的文件类型
var file = document.getElementById("upload").files[0];
var fileType = file.type;
console.log(fileType);

在上述代码中，我们通过getElementById方法获取到文件上传控件的元素，然后使用files属性获取到用户选择的文件列表，从中获取到第一个文件对象file，最后通过type属性获取到文件类型。

除了使用type属性获取文件类型外，还可以使用name属性和后缀名的对应关系来获取文件类型。例如，在JavaScript中可以定义一个文件类型和后缀名的对应关系表：

var fileTypes = {
    "image/jpeg": "jpg",
    "image/png": "png",
    "image/gif": "gif",
    "text/plain": "txt",
    "application/pdf": "pdf"
};

// 获取上传文件的文件类型
var file = document.getElementById("upload").files[0];
var fileType = fileTypes[file.type] || file.name.split(".").pop();
console.log(fileType);

在上述代码中，我们先定义了一个fileTypes对象，表示不同MIME类型对应的文件后缀名。然后通过fileTypes对象和type属性获取文件类型，如果获取不到，则通过name属性获取文件名的后缀名作为文件类型。

总结

通过上述方法，我们可以在JavaScript中获取到文件上传控件中的文件名、大小、类型等信息。在实际开发中，我们可以在用户上传文件后对这些信息进行格式校验和处理，从而实现更加丰富的文件上传功能。