Client Checking file size using HTML5?

Question

I'm trying to ride the wave of HTML5, but I'm facing a little problem. Before HTML5, we checked the size of the flash file, but now the tendency is to avoid using flash in web applications. Is there a way to check client side file size using HTML5?

Answer 1

It works. Place it inside the event listener when the input changes.

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

Answer 2

The accepted answer is actually correct, but you need to bind it to the event listener so that it is updated when the input file has been modified.

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

If you use jQuery library, the following code may be convenient

 $('#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 fileSize transformation for the display, in which the metric is always executed, is up to you.

Answer 3

HTML5 fie api supports file size verification.

read this article for more info on the api file

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

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

Similarly, the API file gives the name and type.

Answer 4

Personally, I would choose this format:

  $('#inputFile').bind('change', function(e) { var data = e.originalEvent.target.files[0]; // and then ... console.log(data.size + "is my file size"); // or something more useful ... if(data.size < 500000) { // what your < 500kb file will do } } 

Answer 5

"no easy, cross-browser solution for this": Client-side file upload size detection?

Answer 6

Uploadify can upload files using HTML5. There is also a flash version.

You can set file size limits using the fileSizeLimit parameter.