正文

掌握JS获取上传文件名的小技巧，轻松实现文件信息获取

/0 浏览量
0407

在网页开发中，有时候我们需要获取用户上传的文件名，以便进行后续的处理。JavaScript 提供了多种方法来实现这一功能。下面，我将详细介绍几种获取上传文件名的小技巧，帮助你轻松实现文件信息获取。

1. 使用 HTML5 的 input 元素

HTML5 的 input 元素提供了一个 type="file" 的属性，允许用户选择文件进行上传。当用户选择文件后，我们可以通过 input 元素的 value 属性来获取文件名。

// 获取文件名
var filename = document.querySelector('input[type="file"]').value;

// 输出文件名
console.log(filename);

这种方法简单易用，但只能获取到文件名，无法获取其他文件信息。

2. 使用 FileReader 对象

FileReader 对象允许我们异步读取文件内容。通过创建一个 FileReader 对象，并调用其 readAsText 方法，我们可以获取文件的文本内容，进而提取文件名。

// 创建 FileReader 对象
var reader = new FileReader();

// 监听文件读取完成事件
reader.onload = function(e) {
    // 获取文件名
    var filename = e.target.result.split('\n')[0];

    // 输出文件名
    console.log(filename);
};

// 选择文件
var file = document.querySelector('input[type="file"]').files[0];

// 读取文件内容
reader.readAsText(file);

这种方法可以获取文件内容，但同样只能获取文件名。

3. 使用 FormData 对象

FormData 对象用于构建一个用于发送请求的数据集。我们可以使用 FormData 对象来上传文件，并通过遍历其 entries 属性来获取文件信息。

// 创建 FormData 对象
var formData = new FormData();

// 添加文件
formData.append('file', document.querySelector('input[type="file"]').files[0]);

// 获取文件名
var filename = formData.get('file').name;

// 输出文件名
console.log(filename);

这种方法可以获取文件名，同时还可以获取其他文件信息，如文件类型、大小等。

4. 使用 FileList 对象

当用户选择多个文件时，input 元素的 files 属性会返回一个 FileList 对象。我们可以遍历这个对象来获取每个文件的信息。

// 获取文件列表
var files = document.querySelector('input[type="file"]').files;

// 遍历文件列表
for (var i = 0; i < files.length; i++) {
    // 获取文件名
    var filename = files[i].name;

    // 输出文件名
    console.log(filename);
}

这种方法可以获取多个文件的信息，但需要用户选择多个文件。

总结

以上四种方法都是获取上传文件名的小技巧。你可以根据实际需求选择合适的方法来实现文件信息获取。希望这些技巧能帮助你更好地进行网页开发。

-- 展开阅读全文 --