如何在JavaScript中获取一个文件的名称、大小和类型

157 阅读1分钟

使用JavaScript,我们可以创建一个函数,显示下载文件的名称、大小、类型和最后修改日期。在下面的Html代码中,我们创建了一个类型为文件的输入字段,当这个输入字段发生变化时,我们将调用一个名为 "getFileInfo() "的函数。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <input type="file" id="myFile" onchange="getFileInfo()" />
    <script>
      function getFileInfo() {
        var name = document.getElementById("myFile").files[0].name;
        var size = document.getElementById("myFile").files[0].size;
        var type = document.getElementById("myFile").files[0].type;
        var date = document.getElementById("myFile").files[0].lastModifiedDate;

        var info = name + " " + size + " " + type + " " + date;
        alert(info);
      }
    </script>
  </body>
</html>

在函数getFileInfo()中,我们已经声明了名称,大小,类型和最后修改日期。在声明这些变量时,我们使用html的document.getElementbyId方法来访问输入字段中的特定文件ID,并应用.files方法,以获得该文件的特定细节。在name变量中,我们使用了.files[0].name来显示文件的名称。同样地,我们使用了.size和.type方法来显示各自的文件大小和它的类型。

在日期的声明中,如果我们利用.lastModifiedDate属性在弹出窗口中显示最后修改的日期。

请注意,所有的文件细节都将显示在弹出的警报中,因为我们已经声明了一个变量info,它联系了所有的文件细节,如(名称,大小类型和日期),中间用空字符串""留了一些空格。当文件被选中后,弹出的警告窗口打开时,持有这些细节的变量info就会被调用。

这里你可以找到上述代码的输出。

name

name

name