We may not be able to save files directly to the user's filesystem, but we can access files using HTML5's File API. The File API allows you to get information about, and load the contents of, files that the user selects. The user can select files using an input element with a type of file
. The process for loading a file works in the following way:
<input type="file">
element.files
property. The list is a FileList
object containing File objects.The File
object contains three fields.
name
: This is the filename. It doesn't include path information.size
: This is the size of the file in bytes.type
: This is the MIME type, if it can be determined.FileReader
object to read the file's data. The file is loaded asynchronously. After the file has been read, it will call the onload
event handler. FileReader
has a number of methods for reading files that take a File
object and return the file contents.readAsArrayBuffer()
: This method reads the file contents into an ArrayBuffer
object.readAsBinaryString()
: This method reads the file contents into a string as binary data.readAsText()
: This method reads the file contents into a string as text.readAsDataURL()
: This method reads the file contents into a data URL string. You can use this as the URL for loading an image.18.222.125.171