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

Javascript 客户端使用HTML5检查文件大小?,javascript,html,file-upload,Javascript,Html,File Upload,我试图驾驭HTML5浪潮,但我面临一个小问题。在HTML5之前,我们用flash检查文件大小,但现在的趋势是避免在web应用程序中使用flash。有没有办法使用HTML5在客户端检查文件大小?“没有简单的跨浏览器解决方案可以实现这一点”:这很有效。当输入发生更改时,将其放置在事件侦听器中 if (typeof FileReader !== "undefined") { var size = document.getElementById('myfile').files[0].size;

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

“没有简单的跨浏览器解决方案可以实现这一点”:

这很有效。当输入发生更改时,将其放置在事件侦听器中

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

HTML5 fie api支持检查文件大小

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


var size=document.getElementById(“fileInput”).files[0]。大小;

类似地,文件API给出了名称和类型。

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

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

假设文件大小到显示的转换由您决定

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

    $('#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
      }
    }
$('#inputFile').bind('change',函数(e){
var data=e.originalEvent.target.files[0];
//然后。。。
log(data.size+“是我的文件大小”);
//或者更有用的东西。。。
如果(数据大小<500000){
//您的<500kb文件将做什么
}
}

还可以添加服务器大小验证,但您最好省去使用现代浏览器的痛苦,同时检查客户端。我在IE 10、Mozilla FFx和Chrome中都能使用它。谢谢!工作正常,只是您没有正确使用它;登录输入的onchange事件,您就没事了。@dandavis我在答案中使用了代码。如果de工作正常,为什么我需要更改它?@Chuck您的示例不工作,因为在选择任何文件之前,您尝试在页面加载时读取文件列表。@Chuck:好的,它工作正常,您确实粘贴了它,但单靠它是不够的。如果在填充文件后在控制台中运行它,您会看到它工作正常。对于应用程序,控制台是不太好,因此您应该将代码放在填充输入后运行的事件中,这样它将按预期工作。很抱歉误解。您的jQuery示例不起作用。您似乎无法将jQuery与
一起使用。文件
:(我自己在提出解决方案时发现了这一点——如果您将其更改为
document.getElementById
,它就会工作)@Chuck很抱歉这里的错误,我已经用有效的答案更新了我的答案。我相信500kb实际上是500*1024。没什么大不了的,但是拥有500000B文件的最终用户会将其视为488kb并拒绝。现在开始大的挫折
    $('#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
      }
    }