js 获取上传文件的大小

在JavaScript中获取上传文件的大小，通常是在处理HTML表单中的文件上传时进行的操作。以下是相关的基础概念、优势、类型、应用场景以及具体的实现方法：

基础概念

File API：HTML5引入的File API允许网页脚本读取用户计算机上的文件内容，而无需将整个文件上传到服务器。
Blob对象：表示不可变的原始数据，File对象继承自Blob对象。

优势

用户体验：可以在客户端进行文件大小验证，减少不必要的服务器请求。
性能优化：提前过滤掉过大的文件，减轻服务器负担。

类型

客户端验证：在用户提交表单之前，在浏览器中获取文件大小。
服务器端验证：在文件上传到服务器后，再进行大小验证。

应用场景

限制上传文件的大小：例如，限制用户上传的图片不超过2MB。
显示文件大小信息：在上传过程中显示文件的大小，让用户了解上传进度。

实现方法

以下是一个简单的示例代码，展示如何在JavaScript中获取上传文件的大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Size Example</title>
</head>
<body>
    <input type="file" id="fileInput" />
    <p id="fileSize"></p>

    <script>
        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const fileSize = file.size; // 文件大小，单位为字节
                const fileSizeInKB = (fileSize / 1024).toFixed(2); // 转换为KB
                document.getElementById('fileSize').textContent = `File size: ${fileSizeInKB} KB`;
            } else {
                document.getElementById('fileSize').textContent = 'No file selected';
            }
        });
    </script>
</body>
</html>