HTML5 用File对象获取文件信息

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


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>

相关阅读:
【LearnOpenGL基础入门——2】搭建第一个OpenGL窗口
MySQL事务隔离级别详解
基于Dockerfile制作镜像
通过Java操作Kafka
Word添加附件（附件图标被挡住的问题）
Python中Tkinter模块的Canvas控件使用学习（3：绘制工艺卡片）
uni-app+vue3会遇到哪些问题
quarkus依赖注入之七：生命周期回调
初识AOS --------AOS学习笔记系列
deb包格式实例详解

原文地址：https://blog.csdn.net/qq_33514421/article/details/126333684