正文

掌握JavaScript获取文件名称和大小的小技巧

/0 浏览量
1111

在Web开发中，处理文件信息是常见的需求，例如展示上传文件的名称和大小。JavaScript 提供了多种方法来获取文件的相关信息。以下是一些简单而有效的小技巧，帮助你轻松获取文件名称和大小。

获取文件名称

当用户通过 <input type="file"> 标签选择文件后，你可以通过 JavaScript 获取到这个文件对象。然后，你可以使用 file.name 属性来获取文件的名称。

// 当用户选择文件后
function getFileDetails() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0]; // 获取第一个文件对象

    if (file) {
        console.log('文件名称:', file.name);
    } else {
        console.log('没有选择文件。');
    }
}

在上面的代码中，我们首先通过 ID 获取到 <input> 元素，然后通过 files[0] 获取用户选择的第一个文件对象。使用 file.name 可以直接获取文件名。

获取文件大小

同样地，你可以通过 file.size 属性来获取文件的大小，这个值通常以字节为单位。

// 获取文件大小
function getFileDetails() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0]; // 获取第一个文件对象

    if (file) {
        console.log('文件名称:', file.name);
        console.log('文件大小:', file.size, '字节');
    } else {
        console.log('没有选择文件。');
    }
}

转换文件大小单位

文件大小通常很大，直接以字节为单位展示不太直观。我们可以通过计算将其转换为更易读的单位，如 KB、MB、GB 等。

// 转换文件大小单位
function formatFileSize(size) {
    var units = ['字节', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    var i = Math.floor(Math.log(size) / Math.log(1024));
    return (size / Math.pow(1024, i)).toFixed(2) + ' ' + units[i];
}

// 使用函数
function getFileDetails() {
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0]; // 获取第一个文件对象

    if (file) {
        console.log('文件名称:', file.name);
        console.log('文件大小:', formatFileSize(file.size));
    } else {
        console.log('没有选择文件。');
    }
}

在这个例子中，formatFileSize 函数接收文件大小（以字节为单位），并计算出适当的单位，同时保留两位小数。

总结

通过上述技巧，你可以轻松地在JavaScript中获取文件的名称和大小。这些方法在处理文件上传、预览等场景时非常有用。记住，这些功能在现代浏览器中通常都能很好地工作，但在某些旧版浏览器中可能需要额外的polyfills或兼容性处理。

-- 展开阅读全文 --