How to Check File Input Size with Jquery

How to check file input size with jQuery?

You actually don't have access to filesystem (for example reading and writing local files), however, due to HTML5 File Api specification, there are some file properties that you do have access to, and the file size is one of them.

For the HTML below

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

try the following:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

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

});

As it is a part of the HTML5 specification, it will only work for modern browsers (v10 required for IE) and I added here more details and links about other file information you should know: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

Old browsers support

Be aware that old browsers will return a null value for the previous this.files call, so accessing this.files[0] will raise an exception and you should check for File API support before using it

Getting file size by id in jquery

Hope this helps:

$('#btn').click(function () {     alert( $('#file')[0].files[0].size);});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><html>    <body>        <form>            <input id="file" type="file"/>            <input id="btn" type="button" value="Test"/>        </form></body></html>

jquery to verify file type and file size before submitting

I'd suggest the following:

$('input:file').change(
    function(e) {
        var files = e.originalEvent.target.files;
        for (var i=0, len=files.length; i<len; i++){
            console.log(files[i].fileName, files[i].type, files[i].fileSize);
        }
    });

JS Fiddle demo.

As JavaScript can't remove files from the selected fileList object, you'd have to perform checks against the file attributes and prompt the user to deselect files that would be considered invalid due to file-type or file-size (and, obviously, prevent the form submitting):

$('input:file').change(
    function(e) {
        var files = e.originalEvent.target.files;
        for (var i=0, len=files.length; i<len; i++){
            var n = files[i].name,
                s = files[i].size,
                t = files[i].type;

            if (s > 100) {
                console.log('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed. Sorry!');
            }
        }
    });

JS Fiddle demo.

(This last code tested and working in Chromium 19 and Firefox 15, both on Ubuntu 11.04.)

How to validate input type file size in Jquery?

   <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript" > </script>
   <script type="text/javascript">
     function GetFileSize(fileid) {
     try {
     var fileSize = 0;
     //for IE
     if ($.browser.msie) {
     //before making an object of ActiveXObject, 
    //please make sure ActiveX is enabled in your IE browser
      var objFSO = new ActiveXObject("Scripting.FileSystemObject"); 
      var filePath = $("#" + fileid)[0].value;
      var objFile = objFSO.getFile(filePath);
      var fileSize = objFile.size; //size in kb
      fileSize = fileSize / 1048576; //size in mb 
      }
     //for FF, Safari, Opeara and Others
      else {
      fileSize = $("#" + fileid)[0].files[0].size //size in kb
      fileSize = fileSize / 1048576; //size in mb 
      }
      alert("Uploaded File Size is" + fileSize + "MB");
      }
      catch (e) {
      alert("Error is :" + e);
      }
      }
    </script>

    <form id="pform" method="post" name="jform">

    <input type="file" name="filed" id="filed" required="required">

    <input type="button" value="PUBLISH PHOTO" id="hello" name="publishpost"  onclick="GetFileSize('filed');" >

    </form>

How to attach an event to check the file size before upload on all input type= file ?

You can just bind the change event with jQuery:

$('input[type="file"]').change(function(){
    var f=this.files[0];
    var sizeInMb = f.size/1024;
    var sizeLimit= 1024*5; // if you want 5 MB
    if (sizeInMb > sizeLimit) {
        alert('Sorry the file exceeds the maximum size of 5 MB!');
        // reset the input (code for all browser)
        this.replaceWith(input.val('').clone(true));
        return false;
    }
    else {
        // go on
    }
}

Hope this helps.

JQuery Validating image with size 2mb

 $(document).ready(function() {       
    $('#logo').bind('change', function() {
        var a=(this.files[0].size);
        alert(a);
        if(a > 2000000) {
            alert('large');
        };
    });
});

JavaScript file upload size validation

Yes, you can use the File API for this.

Here's a complete example (see comments):

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (Can't use `typeof FileReader === "function"` because apparently it
    // comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}

body {
    font-family: sans-serif;
}

<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>

How to Check File Input Size with Jquery