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
The File object has these methods.
| Method | Description |
|---|---|
| msClose |
Releases the file lock for the associated file resource or frees the memory for the Blob object. After calling this method, performing addition operations on the Blob object fails and throws an exception. |
Properties
The File object has these properties.
| Property | Description |
|---|---|
|
The last modified date of the file. | |
|
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>
Build date: 11/28/2012
