在HTML5中，可以使用File API来获取用户选择文件的大小和类型

本文链接：https://blog.csdn.net/blog_programb/article/details/106981041

本文深入探讨HTML5中如何利用JavaScript获取文件的大小和类型，结合innerHTML属性展示文件内容，同时关注CSS在美化过程中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在HTML5中，可以使用File API来获取用户选择文件的大小和类型。这里有一个简单的jQuery示例：

// 当用户点击选择文件按钮时触发的事件
$("#uploadButton").on("change", function(e) {
   
    var fileInput = e.target;
    
    // 获取选中的文件
    var files = fileInput.files;
    
    // 遍历文件数组
    for (var i = 0; i < files.length; i++) {
   
        var file = files[i];
        
        // 文件名
        var fileName = file.name;
        
        // 文件类型
        var fileType = file.type;
        
        // 文件大小（以字节为单位）
        var fileSizeInBytes = file.size;
        
        // 如果需要转换成其他单位（如KB或MB），可以这样计算
        var fileSizeInKb = fileSizeInBytes / 1024;
        var fileSizeInMb = fileSizeInKb / 1024;
        
        console.log("文件名:", fileName);
        console.log("文件类型:", fileType);
        console.log("文件大小 (B):", fileSizeInBytes);
        console.log("文件大小 (KB):", fileSizeInKb.toFixed(2));
        console.log("文件大小 (MB):", fileSizeInMb.toFixed(2));
    }
});