HTML5 用File对象获取文件信息

Hillbox

已于 2022-08-14 17:13:24 修改

阅读量809

点赞数 1

分类专栏： html5 文章标签： html5 javascript 前端

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

本文链接：https://blog.csdn.net/qq_33514421/article/details/126333684

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

<!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>