HTML5 用File对象获取文件信息

原创已于 2022-08-14 17:13:24 修改 · 958 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #前端

于 2022-08-14 17:09:08 首次发布

html5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的HTML脚本，该脚本可以读取用户上传的图片文件，并将其大小从字节转换为更易读的格式（如KB、MB等）。通过使用JavaScript，我们能够动态地展示文件的基本信息，包括名称、大小、类型及最后修改日期。

对书上案例进行改进和注释。特别注意文件大小单位的转换。下图中前两行是循环中进行的打印，可忽略。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title></title>
  <script>
    window.onload = function () {
      var oFile = document.getElementById("file");
      oFile.onchange = function(){
        //获取第1个文件
        var file = oFile.files[0];
        //默认单位是B，在此对超过1024B的图片大小进行转换
        var unitArr = ["B", "KB", "MB", "GB", "TB"];
        var size = file.size;
        //转化单位，每循环一次，就上升一个单位
        for (var i = 0; size > 1; i ++) {
          //size.toFixed(2)方法是四舍五入保留2位小数，不会改变size的值
          var fileSizeString = size.toFixed(2) + unitArr[i];
          // console.log(size + " " + fileSizeString);
          size /= 1024;
        }
        //输出结果
        console.log("图片名称为：" + file.name);
        console.log("图片大小为：" + fileSizeString);
        console.log("图片类型为：" + file.type);
        console.log("修改时间为：" + file.lastModifiedDate);
      };
    }
  </script>
</head>
<body>
  <input id="file" type="file" accept="image/*" />
</body>
</html>