Export (0) Print
Expand All

File object

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

Internet Explorer 10

 

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

The File object has these methods.

MethodDescription
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.

PropertyAccess typeDescription

lastModifiedDate

Read-only

The last modified date of the file.

name

Read-only

The name of the file.

 

Examples

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


<!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>

 

 

Show:
© 2014 Microsoft