客户端使用 HTML5 检查文件大小?

IT技术 javascript html file-upload
2021-01-11 12:51:24

我正在尝试驾驭 HTML5 浪潮,但我面临一个小问题。在 HTML5 之前,我们使用 flash 检查文件大小,但现在的趋势是避免在 web 应用程序中使用 flash。有什么方法可以使用 HTML5 在客户端检查文件大小吗?

5个回答

这有效。将它放在事件侦听器中,以便在输入更改时使用。

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}
@Chuck 您的示例不起作用,因为您在选择任何文件之前尝试在页面加载时读取文件列表。
2021-03-12 12:51:24
工作正常,你只是没有正确使用它;登录输入的 onchange 事件,你会没事的。
2021-03-17 12:51:24
@dandavis 我正在使用答案中的代码。如果代码运行良好,为什么我需要更改它?
2021-03-19 12:51:24
@Chuck:好的,它确实工作得很好,并且您确实粘贴了它,但仅靠它是不够的。如果您在填充文件后在控制台中运行它,您会看到它运行良好。对于应用程序,控制台不好,所以你应该把代码放在一个在输入填充后运行的事件中,这样它就会按预期工作。很抱歉对于这个误会。
2021-03-22 12:51:24
它适用于 IE 10、Mozilla FFx 和 Chrome。谢谢!
2021-04-08 12:51:24

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

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);
  }
});

鉴于文件大小的转换以显示哪个指标取决于您。

您的 jQuery 示例不起作用。您似乎无法将 jQuery 用于.filesjsfiddle.net/edxvo4wa(我在提出解决方案时自己发现了这一点——如果您将其更改为 ,它就可以工作document.getElementById)。
2021-03-14 12:51:24
@Chuck 很抱歉那里的错误,我已经用有效的答案更新了我的答案
2021-04-05 12:51:24

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 给出了名称和类型。

就个人而言,我会选择这种格式:

    $('#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 并拒绝。这里开始了巨大的挫败感
2021-03-17 12:51:24

“没有简单的跨浏览器解决方案来实现这一点”:在客户端检测文件上传大小?

还要添加服务器大小验证,但您也可以避免使用现代浏览器的痛苦并在客户端进行检查。
2021-03-20 12:51:24