Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
​
<html>
​
<head>
    <title>Input File</title>
</head>
​
<body>
      <input type="file" id="inputImg" />
    
    <p>
        <strong>File Size:</strong>
        <span id="fileSize"></span>
    </p>
​
<script>
    document.addEventListener( 'DOMContentLoaded', function() {
        var inputImg = document.getElementById( 'inputImg' );
        
        inputImg.addEventListener( 'change', function( e ) {
            var fileSize = getFileSize( inputImg );
            
            if( fileSize > -1 ) {
                document.getElementById( 'fileSize' ).innerHTML = ( fileSize / 1024 ).toFixed( 2 ) + ' KB';
    
    if(fileSize > 10485760) {
    alert("Your file is too large to be uploaded");
    inputImg.value = "";
    document.getElementById( 'fileSize' ).innerHTML = "";
    }
    }
    
            else
                document.getElementById( 'fileSize' ).innerHTML = 'Failed to get file size';
            
        }, false );
    }, false );
    
    function getFileSize( inputFile ) {
        var files = inputFile.files;
        
        if( !files ) {
            //for IE
            try {
                var fs = new ActiveXObject( 'Scripting.FileSystemObject' );
                var file = fs.getFile( inputFile.value );
                return file.size;
            } catch( ex ) {
                return -1;
            }
            
        } else if( files.length > 0 ) {
            //for rest of the world
            return files[ 0 ].size;
          
    
        }
    
    }
   
</script>
​
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers