With the advent of HTML5 ( the new standard for the web ) also comes new API, with great features. This new set of API has made things that were quite difficult or outrightly impossible to do on the browser, possible.
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]
\n
\nIn this example we are going to demystify one of the features of HTML5-The file API. For this example we will use:<\/p>\n
HTML5 File API comes with a lot of possibilities. Operations that were once only possible on native applications, are now a possibility on both desktop and mobile browsers.
\nThe HTML5 File API allows you to create applications that let the user interact with files locally. Basically, you can load files and render them in the browser without actually having to upload the files. It is now possible to display thumbnails of images on the user hard drive in a browser.<\/p>\n
Adding a file chooser dialog to a web app is as simple as adding the line below to your HTML.<\/p>\n
< input type =file id=pick >\r\n<\/pre>\nThe input type file is used to add a file chooser dialog to HTML. The attribute id is used to identify an HTML element in a document. To work with files locally, their are three objects we would need to work with.<\/p>\n
If a user selects more than one file, the filelist object gives us access to each file the user selected. To allow the user select multiple files, add We need to register an onchange listener to our file chooser.<\/p>\n Complete code below<\/p>\n index.html<\/em><\/span><\/p>\n In line 39 we create the file chooser and register an event listener. We also add the attribute index2.html<\/em><\/span><\/p>\n You can easily loop through the FileList to access each file object.<\/p>\n There are three attributes provided by the\u00a0File object that contain useful data about the file.<\/p>\n index3.html<\/em><\/span><\/p>\n The above code iterates through the FileList object and prints out the details of each file. In line 29 we get the file chooser object (input type file) and store it in a variable. In 30 we store the FileList object in a variable, in line 31 we store our div object in a variable. In the for loop we iterate through the FileList object and store the details of each file in a variable(as a string) and print the result on the screen.<\/p>\n In this section we are going to display picture\/s or image\/s stored on the user hard drive in the browser. Once the user has selected a file and you have a reference to the selected file (e.g. via the onchange\u00a0event) you can read the file using a FileReader. The FileReader\u00a0object contains the following functions, you can use to load files with:<\/p>\n index4.html<\/em><\/span><\/p>\n When you select an image, it is displayed in the browser, but you can only select one image at a time.<\/p>\n In the next example, we are going to read text from a text file and display it in the browser.<\/p>\n index4.html<\/em><\/span><\/p>\n In this example we learnt about HTML5 file API. We also studied about the File, FileReader and FileList objects. We learnt how to read images and text file from the users hard drive and display the contents appropriately in the browser.<\/p>\nmutiple<\/code> to the file chooser signature.<\/p>\n< input type =file multiple id=pick >\r\n<\/pre>\n
< input type =file multiple id=pick onchange=\"change(event)\" >\r\n<\/pre>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n#pick{\r\nmargin:10px;\r\n}\r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Semantic Elements Example\r\n<\/title>\r\n\t<style>\r\n\r\n\r\n<\/style>\r\n\t<\/head>\r\n\t<body>\r\n<script>\r\nfunction change(){\r\nvar p=document.getElementById(\"pick\")\r\nvar p1=p.files;\r\nalert(p1.length+ \" files choosen\");\r\n\r\n}\r\n<\/script>\r\n<p>\r\n<input type =file multiple id=pick onchange=\"change()\" >\r\n<\/p>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\nmultiple<\/code> to the tag, so as to allow a user select more than one file. When an onchange <\/code> event occurs the function change <\/code> is called. In the change<\/code> function we alert the the number of files that was selected.
\nIf you want the user to select only one file, just remove the attribute multiple <\/code> from the file chooser tag or run the code below.<\/p>\n<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n#pick{\r\nmargin:10px;\r\n}\r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Semantic Elements Example\r\n<\/title>\r\n\r\n\t<\/head>\r\n\t<body>\r\n<script>\r\nfunction change(){\r\nvar p=document.getElementById(\"pick\")\r\nvar p1=p.files;\r\nalert(p1.length+ \" files choosen\");\r\n\r\n}\r\n<\/script>\r\n<p>\r\n<input type =file id=pick onchange=\"change()\" >\r\n<\/p>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n\r\n<\/pre>\n1.2 Handling Multiple Files<\/h3>\n
for (var i = 0; i<files.length; i++) { \r\nvar file = files[i]; \r\n\/\/where files represents the FileList object.\r\n }\r\n\r\n<\/pre>\n\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n#pick{\r\nmargin:10px;\r\n}\r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 Semantic Elements Example\r\n<\/title>\r\n\r\n\t<\/head>\r\n\t<body>\r\n<script>\r\nfunction change(){\r\nvar p=document.getElementById(\"pick\")\r\nvar p1=p.files;\r\nvar c=document.getElementById(\"w\");\r\nvar e=\"Number of files \"+p1.length;\r\nfor(var i=0; i<p1.length; i++){\r\nvar r=p1[0];\r\ne=e+\"<p><br>Size Of File: \"+r.size + \"bytes<br>Name Of File: \"+r.name+\"<br>Mime Type Of File \"+r.type+\"<\/p>\";\r\nc.innerHTML=e;\r\n}\r\n}\r\n<\/script>\r\n<p>\r\n<input type =file id=pick onchange=\"change()\" multiple >\r\n<\/p>\r\n<div id=w>\r\n\r\n<\/div>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n1.3 Displaying A Picture From Disk<\/h3>\n
\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n#pick{\r\nmargin:10px;\r\n}\r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 File API Example\r\n<\/title>\r\n\r\n\t<\/head>\r\n\t<body>\r\n<script>\r\nfunction change(){\r\n\/\/get the file chooser object\r\nvar p=document.getElementById(\"pick\")\r\n\/\/get the div element where the images will be displayed\r\npd=document.getElementById(\"pr\");\r\nvar p1=p.files;\r\n\/\/get the first file in the list\r\nvar p2=p.files[0];\r\n\/\/create a reader object to read the file\r\nvar reader = new FileReader(); \r\n\/\/ register an onload object on the reader\r\nreader.onload = function(loadedEvent) { \r\ne=document.createElement(\"img\"); \/\/ create an image element\r\ne.setAttribute(\"src\",loadedEvent.target.result); \/\/ set the SRC of the image\r\ne.setAttribute(\"width\",\"80%\"); \/\/ set the width of the image\r\npd.appendChild(e); \/\/ add the image \r\nalert(\"\")\r\n } \r\nreader.readAsDataURL(p2);\/\/ read the file as a dataUrl\r\n\r\n}\r\n<\/script>\r\n<p>\r\n<input type =file id=pick onchange=\"change()\" >\r\n<\/p>\r\n<div id=pr>\r\n\r\n<\/div>\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n1.3 Display Text<\/h3>\n
<!DOCTYPE html> \r\n<html lang=en>\r\n\t<head>\r\n\t<style>\r\n\thtml, body{\r\n\twidth:100%;\r\n\theight:100%;\r\n\tmargin:0%;\r\n\tfont-family:\"helvetica\",\"verdana\",\"calibri\", \"san serif\";\r\n\toverflow:visible;\r\n\tpadding:0%;\r\n\tborder:0%;\r\n\t}\r\n#pick{\r\nmargin:10px;\r\n}\r\n\t<\/style>\r\n\t \t\t<meta charset=\"utf-8\" \/>\r\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi\"\/>\r\n\t\r\n\t<title> \r\nHtml5 File API Example\r\n<\/title>\r\n\r\n\t<\/head>\r\n\t<body>\r\n<script>\r\nfunction change(){\r\n\/\/get the file chooser\r\nvar p=document.getElementById(\"pick\")\r\n\/\/get the FileList Object\r\nvar p1=p.files;\r\n\r\n\/\/create a reader object to read the file\r\nvar reader = new FileReader(); \r\n\/\/ register an onload object on the reader\r\nreader.onload = function(loadedEvent) { \r\nvar pd=document.body;\r\ne=document.createElement(\"div\"); \/\/ create a div element\r\ne.setAttribute(\"id\",\"d\"); \/\/ set the id for the div\r\ne.setAttribute(\"width\",\"80%\"); \/\/ set the width of the div\r\npd.appendChild(e); \/\/ add the div\r\ne.innerHTML=\"<p>\"+loadedEvent.target.result+\"<\/p>\"\r\n\r\n } \r\nreader.readAsText(p1[0]);\/\/ read the file as a dataUrl\r\n}\r\n<\/script>\r\n<p>\r\n<input type =file id=pick onchange=\"change()\" >\r\n<\/p>\r\n\r\n\t<\/body>\r\n\t<\/html>\r\n<\/pre>\n2. Summary<\/h2>\n
3. Download the source code<\/h2>\n