File object

The File object (which inherits from the Blob object) provides read-only informational attributes about a file.

Syntax


<input type="file" onchange="document.write('File name = ' + this.files[0].name)"/>

DOM Information

Inheritance Hierarchy

Blob

File

Members

The File object has these types of members:

Methods
Properties

Methods

The File object has these methods.

Method	Description
msClose	Closes the Blob object by releasing the stream held by the Blob and the associated file or memory resource.

Properties

The File object has these properties.

Property	Access type	Description
lastModifiedDate	Read-only	The last modified date of the file.
name	Read-only	The name of the file.
webkitRelativePath		The relative path of the file that is being handled when selecting a folder using input.

Examples

The following code example acquires basic file-related information such as name, type, and size.

JavaScript


<!DOCTYPE html>
<html>
  <head>
    <title>Acquiring File Information</title>  
    <style type="text/css">
      #alert {
        color: red;
        margin: 1em 0;
      }
    </style>  
    <script type="text/javascript">
      window.addEventListener('load', init, false);

      function init() {
        checkForFileApiSupport();
        document.getElementById('files').addEventListener('change', handleFileSelection, false);
      }

      function checkForFileApiSupport() {
        if (window.File && window.FileReader && window.FileList && window.Blob) {  
        // All the File APIs are supported.
        } 
        else {  
          document.getElementById('alert').innerHTML = "The File APIs are not fully supported in this browser.";
        }
      }

      function handleFileSelection(evt) {    
        var files = evt.target.files; // The files selected by the user (as a FileList object).

        // "files" is a FileList of file objects. List some file object properties.    
        var output = [];    
        for (var i = 0, f; f = files[i]; i++) {    
          output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',                  
                      f.size, ' bytes, last modified: ',                  
                      f.lastModifiedDate, '</li>');    
        }    
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';  
      }  
    </script>
  </head>

  <body>
    <input type="file" id="files" name="files[]" multiple /> <!-- The name attribute value is typically paired with the field's data when submitted via a <form> tag. -->
    <output id="list"></output>
    <div id="alert"></div>
  </body>
</html>