Skip to content

Instantly share code, notes, and snippets.

@lizlongnc
Last active August 29, 2015 14:07
Show Gist options
  • Save lizlongnc/539e788e6638093da11b to your computer and use it in GitHub Desktop.
Save lizlongnc/539e788e6638093da11b to your computer and use it in GitHub Desktop.
JS FileReader & input type="file"
The input element with a type attribute whose value is "file" represents a list of file items, each consisting of a file name, a file type, and a file body (the contents of the file).
http://www.w3.org/TR/html-markup/input.file.html
http://msdn.microsoft.com/en-us/library/windows/apps/hh466145.aspx
Read Text Files Using the JavaScript FileReader
http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html
READONLY information for an individual file such as its name, size, mimetype, and a reference to the file handle. Adding the "multiple" attribute to the file input element (as in <input type="file" multiple/> will get you a list of files
<input type="file"/>
input always returns a FileList object
Whether you include the multiple attribute or not, the file input always returns a FileList object, which is a simple array of individually selected files from the underlying system. Like any array, it is zero based, so files[0] gets the first one.
To check for browser support, do not use:
{
//do your stuff!
}
Instead, do:
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
//do your stuff!
} else {
alert('The File APIs are not fully supported by your browser.');
}
Of course, you can always use Modernizr too.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment