Menu
I was reading this http://dev.w3.org/html5/markup/input.file.html, but I only found the "accept" attribute.
I tried this
<input type="file" name="imagefilename" accept="image/x-png, image/gif, image/jpeg" /> Is it possible client-side validation of file size?
I found this technique for IE
<html> <head> <script> function getSize() { var myFSO = new ActiveXObject("Scripting.FileSystemObject"); var filepath = document.upload.file.value; var thefile = myFSO.getFile(filepath); var size = thefile.size; alert(size + " bytes"); } </script> </head> <body> <form name="upload"> <input type="file" name="file"> <input type="button" value="Size?" onClick="getSize();"> </form> </body> </html> Is it possible to do the same using html5 filesystem api ?
UPDATE
I could do this (demo):
<!doctype html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> </head> <body> <form > <input type=file id=f max-size=32154 > <input type=submit> </form> <script> $(function(){ $('form').submit(function(){ var isOk = true; $('input[type=file][max-size]').each(function(){ if(typeof this.files[0] !== 'undefined'){ var maxSize = parseInt($(this).attr('max-size'),10), size = this.files[0].fileSize; isOk = maxSize > size; return isOk; } }); return isOk; }); }); </script> </body> It is working fine, but I think It will be better to a native html5 attr to validate
663
Determining the size of the file using jQuery and HTML5Inside the click event handler, first a check is performed to verify whether the browser supports HTML5 File API. If the browser supports HTML5 File API then the size of the file is determined and the displayed.
<input type='file' name='txtUploadFileName' /> Then the value in the hidden input with name 'MAX_FILE_SIZE' is submitted with the when the submit button is clicked. The server then automatically checks if the size of the file exceeds the value of MAX_FILE_SIZE.
You can give the input element a font opacity of 0. This will hide the text field without hiding the 'Choose Files' button.
<form class="upload-form"> <input class="upload-file" data-max-size="2048" type="file" > <input type=submit> </form> <script> $(function(){ var fileInput = $('.upload-file'); var maxSize = fileInput.data('max-size'); $('.upload-form').submit(function(e){ if(fileInput.get(0).files.length){ var fileSize = fileInput.get(0).files[0].size; // in bytes if(fileSize>maxSize){ alert('file size is more then' + maxSize + ' bytes'); return false; }else{ alert('file size is correct- '+fileSize+' bytes'); } }else{ alert('choose file, please'); return false; } }); }); </script> http://jsfiddle.net/9bhcB/2/
184
I could do this (demo):
<!doctype html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> </head> <body> <form > <input type="file" id="f" data-max-size="32154" /> <input type="submit" /> </form> <script> $(function(){ $('form').submit(function(){ var isOk = true; $('input[type=file][data-max-size]').each(function(){ if(typeof this.files[0] !== 'undefined'){ var maxSize = parseInt($(this).attr('max-size'),10), size = this.files[0].size; isOk = maxSize > size; return isOk; } }); return isOk; }); }); </script> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With