Organizational Research By

Surprising Reserch Topic

how to do client checking file size using html5

client checking file size using html5  using -'javascript,html5,file-upload'

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?

asked Sep 8, 2015 by rajesh
edited Sep 9, 2015 by rajesh
0 votes

Related Hot Questions

3 Answers

0 votes

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
answered Sep 8, 2015 by rajesh
0 votes

HTML5 fie api supports to check the file size.

read this article to get more info about file api

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

similarly file API gives name and type.

answered Sep 8, 2015 by rajesh
0 votes

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;

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

  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;

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

answered Sep 8, 2015 by rajesh