代码之家  ›  专栏  ›  技术社区  ›  Khaled Musaied

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

  •  79
  • Khaled Musaied  · 技术社区  · 14 年前

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

    5 回复  |  直到 13 年前
        1
  •  121
  •   Chuck Le Butt    9 年前

    这很管用。当输入更改时,将其放在事件侦听器中。

    if (typeof FileReader !== "undefined") {
        var size = document.getElementById('myfile').files[0].size;
        // check file size
    }
    
        2
  •  29
  •   Ammadu    9 年前

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

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

        3
  •  7
  •   kongaraju    11 年前

    HTML5FIEAPI支持检查文件大小。

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

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

    <input type="file" id="fileInput" />
    
    
    var size = document.getElementById("fileInput").files[0].size;
    

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

        4
  •  3
  •   Alexander Leon    8 年前

        $('#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
          }
        }
    
        5
  •  2
  •   Community Dan Abramov    7 年前

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

    推荐文章