Hello,
In this post I will be talking about new HTML5 file API. Please let me know if this post can be improved. File API will be touched on in 3 posts in HTML5 category.
- Introduction – this post
- File Reading
- Extended specification – creating a local file on clients machine
Lets start knowing about File API. So up until now there have been no support for local file reading or writing but with HTML5 this is changing without compromising the security of course. The File API from my personal point of view is great addition and allows us to
- Read information about the selected files
- Read actual contents of the file.
In this post I will concentrate on FileList and File interfaces.
Let me first of all make a point clear about the security
Security
Now because File API works with files that are outside the working area of browser on client’s machine, it is obvious to get concerned about security. Alright so from the specification it is understood that File API will only work with the user selected files. i.e. File API will not be able to provide you with a Directory structure or work on files on its own rather if will only work with user selected files or files that user is giving exclusive permission to be read.
FileList and File interface
Lets now check these two interfaces. I will give you a demo to work with and you can see yourself.
Before we jump on that I would like to make this point clear that at the time of writing File API works on Chrome 9+, Firefox 3.6+, IE10+, Opera 11.1+
In this exercise we will create a File input box and once user select some files we will output key meta information of the selected files.
The Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <title>HTML5 File API introduction - example</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script> // handle the file selected function handleSelectedFiles(fileInput) { // lets check if files interface is supported if (fileInput.files) { jQuery.each(fileInput.files,function(index,file){ jQuery("#selected-file-info").append('name: ' + file.name + ', ') .append('size: ' + file.size + ' bytes, ') .append('type: ' + file.type + ', ') .append('last modified on: ' + file.lastModifiedDate+ '<br>'); }) } else { // files interface not supported by browser jQuery("#selected-file-info").html('Files interface not supported'); } } </script> </head> <body> <div class="container"> <img src="/images/logo.png"><br><br> <div class="hero-unit"> <h2 class="blue">HTML5 File API example 1</h2><br> </div> <br> <input type="file" multiple onchange="handleSelectedFiles(this)" id="selectedfiles"/> <div id="selected-file-info" ></div> </div> </body> </html> |
Demo
Demo for the above listing can be found here
http://jaspreetchahal.org/examples/html5/html5-file-api-intro.html
We will look into a little bit more complex example in post 2 that will touch base on FileList and File interface again and also touch base on how to read content of a file.
Educational resources
More information can be found on w3 website and the link to File API spec is provided below
I hope that this helps and if you found any error or would like to offer an improvement to this post, leave your comments.
Cheers
i enjoyed your filelist file api part 1 it was a good starting point. do you have a part 2 (i hope, i hope).
thanks
dean