how to check file size before upload in javascript

Question

I use this code for check file type

// - coursesweb.net
  // get the file name and split it to separe the extension
  var name = el.value;
  var ar_name = name.split('.');

but now i want to apply this code to get file size , how can i do ?

code from this site

Answer 1

You can check the filesize by files[0].size

try the following:

$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

Answer 2

try this to get file size

document.getElementById('fileid').addEventListener('change', checkFile, false);

function checkFile(e) {
    var file_list = e.target.files;
    for (var i = 0, file; file = file_list[i]; i++) {
        var fileExtension = file.name.split('.')[file.name.split('.').length - 1].toLowerCase();
        var iConvert = (file.size / 1024).toFixed(2);

        txt = "File type : " +fileExtension + "\n";
        if(file.size > (1024 * 1024)){
            txt += "Size: " + (file.size / (1024*1024)).toFixed(2) + " MB \n";
        } else {
        txt += "Size: " + (file.size / 1024).toFixed(2) + " KB \n";
        }
        alert(txt);
    }
}

fiddle

Answer 3

If browser supports File API.

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('file_input_field_id').files[0].size;
} else {
    console.log("File API is not supported");
    var size = -1;
}

If you want to get file size on client side w/o File API, needs to use flash. You can use lib like FileAPI.js for this

Answer 4

You can check the file size like this.

Lets say your HTML is:

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

 var size = document.getElementById('file').files[0].size;