javascript - Client Checking file size using HTML5? - Stack Overflow

admin管理员组

文章数量:1135065

I'm trying to ride the HTML5 wave but I'm facing a small issue. Before HTML5 we were checking the file size with flash but now the trend is to avoid using flash in web apps. Is there any way to check the file size in the client side using HTML5?

I'm trying to ride the HTML5 wave but I'm facing a small issue. Before HTML5 we were checking the file size with flash but now the trend is to avoid using flash in web apps. Is there any way to check the file size in the client side using HTML5?

• javascript
• html
• file-upload

Share Improve this question Follow edited Oct 19, 2011 at 15:39 Johann 4,36333 gold badges4242 silver badges4141 bronze badges asked Nov 6, 2010 at 9:26 Khaled MusaiedKhaled Musaied 2,49333 gold badges2525 silver badges3838 bronze badges 0

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 134

This works. Place it inside an event listener for when the input changes.

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

The accepted answer is actually correct, but you need to bind it to a event listener so that it would update when ever the file input is changed.

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

If you are using jQuery library then the following code may come handy

$('#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);
  }
});

Given that the conversion of the fileSize to display in which ever metric is up to you.

The HTML5 file API supports to check the file size.

Read this article to get more info about file api

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

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


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

similarly file API gives name and type.

Personally, I would opt for this format:

    $('#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
      }
    }

"no simple, cross-browser solution to achieve this" : Detecting file upload size on the client side?

I prefer to do the check (validation), when the form is about to be submitted. That way, I don't have to perform an extra check to know if a file was selected, because the size check happens alongside other html5 validation attributes (e.g. required).

$('#fileForm').on('submit',function() {
    // file will not submit if is greater than 5MB
    if($('#fileInput').prop('files')[0].size > 5*1024*1024){ 
        alert('Max file size is 5MB');
        return false;
    }
});

本文标签： javascriptClient Checking file size using HTML5Stack Overflow