客户端使用 HTML5 检查文件大小？答案

【问题标题】：Client Checking file size using HTML5?客户端使用 HTML5 检查文件大小？
【发布时间】：2011-05-05 23:35:40
【问题描述】：

我正在尝试赶上 HTML5 浪潮，但遇到了一个小问题。在 HTML5 之前，我们使用 Flash 检查文件大小，但现在的趋势是避免在 Web 应用程序中使用 Flash。有没有办法使用 HTML5 在客户端检查文件大小？

【问题讨论】：

【解决方案1】：

这行得通。将其放置在事件侦听器中，以在输入更改时进行。

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}

【讨论】：

它适用于 IE 10、Mozilla FFx 和 Chrome。谢谢！
工作正常，只是你没有正确使用它；登录输入的 onchange 事件，你会没事的。
@dandavis 我正在使用答案中的代码。如果代码工作正常，我为什么需要更改它？
@Chuck 您的示例不起作用，因为您在选择任何文件之前尝试在页面加载时读取文件列表。
@Chuck：好的，它确实工作得很好，而且你确实粘贴了它，但仅靠它是不够的。如果您在填充文件后在控制台中运行它，您会看到它工作正常。对于应用程序，控制台不好，因此您应该将代码放在一个在填充输入后运行的事件中，这样它就会按预期工作。很抱歉造成误解。

【解决方案2】：

接受的答案实际上是正确的，但您需要将其绑定到事件侦听器，以便在文件输入更改时它会更新。

document.getElementById('fileInput').onchange = function(){
    var filesize = document.getElementById('fileInput').files[0].size;
    console.log(filesize);    
}

如果您使用的是 jQuery 库，那么下面的代码可能会派上用场

$('#fileInput').on('change',function(){
  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;
    console.log(fileSize);
  }
});

鉴于将 fileSize 转换为显示哪个指标取决于您。

【讨论】：

您的 jQuery 示例不起作用。您似乎无法将 jQuery 与 .files 一起使用：jsfiddle.net/edxvo4wa（我自己在想出一个解决方案时发现了这一点——如果您将其更改为 document.getElementById，它就可以工作）。
@Chuck 对那里的错误感到抱歉，我已经用工作的人更新了我的答案

【解决方案3】：

HTML5 fie api 支持查看文件大小。

阅读本文以获取有关文件 api 的更多信息

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="fileInput" />


var size = document.getElementById("fileInput").files[0].size;

类似的文件 API 给出名称和类型。

【讨论】：

【解决方案4】：

就个人而言，我会选择这种格式：

    $('#inputFile').bind('change', function(e) {
      var data = e.originalEvent.target.files[0];
      // and then ...
      console.log(data.size + "is my file's size");
      // or something more useful ...
      if(data.size < 500000) {
        // what your < 500kb file will do
      }
    }

【讨论】：

我相信 500kb 实际上是 500 * 1024。没什么大不了的，但拥有 500,000b 文件的最终用户会将其视为 488kb 并拒绝。从这里开始大挫折

【解决方案5】：

“没有简单的跨浏览器解决方案来实现这一点”：Detecting file upload size on the client side?

【讨论】：

也添加服务器大小验证，但您不妨省去那些使用现代浏览器的痛苦并在客户端也检查它。