{"id":2200,"date":"2015-01-26T13:15:59","date_gmt":"2015-01-26T11:15:59","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2200"},"modified":"2018-06-19T10:08:34","modified_gmt":"2018-06-19T07:08:34","slug":"html5-file-upload-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/","title":{"rendered":"HTML5 File Upload Example"},"content":{"rendered":"

EDITORIAL NOTE<\/strong>: In this post, we feature a comprehensive HTML5 File Upload Example.<\/p>\n

Today I’ll explain how to use\u00a0HTML 5, to read information about file(s) selected by users, and to upload the file(s) on a server.<\/p>\n

The FileApi<\/a> is one of the most interesting features added with HTML 5. Now we can display\u00a0file(s) information\u00a0before<\/strong> they are uploaded on the server, and we can send them without “posting<\/strong>” a form.<\/p>\n

We’ll see how to access file(s) information when they are selected by users, and then upload them\u00a0asynchronously using an Ajax Request.<\/p>\n

[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

1. Show File(s) information<\/h2>\n

1.1 : A single file<\/h3>\n

Access information of a single file selected by the user.<\/p>\n

Here is the HTML code :<\/p>\n

\r\n<input type="file" id="fileinput" \/>\r\n<\/pre>\n
When the user choose a file, the “change<\/strong>“<\/em> event is fired on the input element, so we can listen for it :<\/p>\n
\r\ndocument.getElementById('fileinput').addEventListener('change', function(){\r\n    var file = this.files[0];\r\n    \/\/ This code is only for demo ...\r\n    console.log("name : " + file.name);\r\n    console.log("size : " + file.size);\r\n    console.log("type : " + file.type);\r\n    console.log("date : " + file.lastModified);\r\n}, false);\r\n<\/pre>\n
As you can see, the FileApi<\/a> is quite simple to use, it adds the “files”<\/em><\/strong> property on the HTMLInputElement.<\/p>\n
Note : The\u00a0“files”<\/em> property is not writable, you can only read its content.<\/strong><\/p><\/blockquote>\n
As you may have noticed, we retrieved the chosen file, by accessing the index 0<\/em> of the FileList<\/em> collection : \u00a0this.files[0]<\/code>.<\/p>\n
1.2 Multiple files<\/h3>\n
Now we’ll display information about all the files selected by the user.<\/p>\n
Here is the HTML code :<\/p>\n
\r\n<input type="file" id="fileinput" multiple="multiple" \/>\r\n<\/pre>\n
We’ve just added the multiple=\"multiple\"<\/code><\/strong><\/em> attribute to the HTML element, this will allow user to choose multiple files to upload.<\/p>\n
\r\ndocument.getElementById('fileinput').addEventListener('change', function(){\r\n    for(var i = 0; i<this.files.length; i++){\r\n        var file =  this.files[i];\r\n        \/\/ This code is only for demo ...\r\n        console.group("File "+i);\r\n        console.log("name : " + file.name);\r\n        console.log("size : " + file.size);\r\n        console.log("type : " + file.type);\r\n        console.log("date : " + file.lastModified);\r\n        console.groupEnd();\r\n    }\r\n}, false);\r\n<\/pre>\n
Note<\/strong><\/em> : you can filter elements by adding the “accept”<\/em><\/strong> attribute to the input element :<\/p><\/blockquote>\n
For example, if you only want your user to upload some images, you can filter on the “image\/*” mime-type :<\/p>\n
\r\n<input type="file" id="fileinput" multiple="multiple" accept="image\/*" \/>\r\n<\/pre>\n
1.3 Previewing Files<\/h3>\n
As we can read the file(s) information, we can also read the content of the file, this, for example, can allow us to preview selected files before upload.<\/p>\n
Let’s see an example with previewing images.<\/p>\n
\r\n<!doctype html>\r\n<html lang="en">\r\n<head>\r\n    <meta charset="UTF-8">\r\n    <title>Preview images<\/title>\r\n    <style>\r\n        #gallery .thumbnail{\r\n            width:150px;\r\n            height: 150px;\r\n            float:left;\r\n            margin:2px;\r\n        }\r\n        #gallery .thumbnail img{\r\n            width:150px;\r\n            height: 150px;\r\n        }\r\n\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<h2>Upload images ...<\/h2>\r\n\r\n<input type="file" id="fileinput" multiple="multiple" accept="image\/*" \/>\r\n\r\n<div id="gallery"><\/div>\r\n<script src="gallery.js"><\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
The JavaScript code to manage the uploaded files :<\/p>\n
gallery.js<\/em><\/span><\/p>\n
\r\nvar uploadfiles = document.querySelector('#fileinput');\r\nuploadfiles.addEventListener('change', function () {\r\n    var files = this.files;\r\n    for(var i=0; i<files.length; i++){\r\n        previewImage(this.files[i]);\r\n    }\r\n\r\n}, false);\r\n<\/pre>\n
And, the previewImage<\/code> function that will display the image(s) selected by the user.<\/p>\n
gallery.js<\/em><\/span><\/p>\n
\r\nfunction previewImage(file) {\r\n    var galleryId = "gallery";\r\n\r\n    var gallery = document.getElementById(galleryId);\r\n    var imageType = \/image.*\/;\r\n\r\n    if (!file.type.match(imageType)) {\r\n        throw "File Type must be an image";\r\n    }\r\n\r\n    var thumb = document.createElement("div");\r\n    thumb.classList.add('thumbnail'); \/\/ Add the class thumbnail to the created div\r\n\r\n    var img = document.createElement("img");\r\n    img.file = file;\r\n    thumb.appendChild(img);\r\n    gallery.appendChild(thumb);\r\n\r\n    \/\/ Using FileReader to display the image content\r\n    var reader = new FileReader();\r\n    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);\r\n    reader.readAsDataURL(file);\r\n}\r\n<\/pre>\n
Here we introduced the FileReader<\/code> object, that allow us to asynchronously read the contents of files.<\/p>\n
Instantiate the object with the new FileReader()<\/code>, then tell the object to read the data from the file with the method readAsUrl<\/code>.<\/p>\n
The onload<\/code> method is called after the content is read by the object like an event, then the content of the file is assigned to the image src<\/em> attribute: aImg.src = e.target.result;<\/code><\/p>\n
2. Upload The files<\/h2>\n
Now we will upload files using XMLHttpRequest<\/strong> (Ajax).<\/p>\n
For each files selected by the user we will create an HTTP request to send the file to the server.<\/p>\n
First create a function to upload a file using XMLHttpRequest<\/strong> :<\/p>\n
\r\nfunction uploadFile(file){\r\n    var url = 'server\/index.php';\r\n    var xhr = new XMLHttpRequest();\r\n    var fd = new FormData();\r\n    xhr.open("POST", url, true);\r\n    xhr.onreadystatechange = function() {\r\n        if (xhr.readyState == 4 && xhr.status == 200) {\r\n            \/\/ Every thing ok, file uploaded\r\n            console.log(xhr.responseText); \/\/ handle response.\r\n        }\r\n    };\r\n    fd.append("upload_file", file);\r\n    xhr.send(fd);\r\n}\r\n<\/pre>\n
This function will create an ajax request (POST) on the url<\/strong> and send the file in the “upload_file”<\/em><\/strong> request parameter (we may access this parameter with the $_FILES['upload_file']<\/code><\/strong> variable.<\/p>\n
Now we’ll connect the\u00a0uploadFile<\/code> function to the javascript that manage the selected files :<\/p>\n
The HTML:<\/h3>\n
\r\n<input type="file" id="uploadfiles" multiple="multiple" \/>\r\n<\/pre>\n
The JavaScript:<\/h3>\n
\r\nvar uploadfiles = document.querySelector('#uploadfiles');\r\nuploadfiles.addEventListener('change', function () {\r\n    var files = this.files;\r\n    for(var i=0; i<files.length; i++){\r\n        uploadFile(this.files[i]); \/\/ call the function to upload the file\r\n    }\r\n}, false);\r\n<\/pre>\n
And the PHP script:<\/h3>\n
\r\nif (isset($_FILES['upload_file'])) {\r\n    if(move_uploaded_file($_FILES['upload_file']['tmp_name'], "datas\/" . $_FILES['upload_file']['name'])){\r\n        echo $_FILES['upload_file']['name']. " OK";\r\n    } else {\r\n        echo $_FILES['upload_file']['name']. " KO";\r\n    }\r\n    exit;\r\n} else {\r\n    echo "No files uploaded ...";\r\n}\r\n<\/pre>\n
3. Download<\/h2>\n
I hope this little example will help you to use HTML5 Apis to upload files.<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here : HTML5 File Upload Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
EDITORIAL NOTE: In this post, we feature a comprehensive HTML5 File Upload Example. Today I’ll explain how to use\u00a0HTML 5, to read information about file(s) selected by users, and to upload the file(s) on a server. The FileApi is one of the most interesting features added with HTML 5. Now we can display\u00a0file(s) information\u00a0before they …<\/p>\n","protected":false},"author":46,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-2200","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\nHTML5 File Upload Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn about HTML5 file upload? Check out our Example on how to read info about files selected by users, and to upload the files on a server.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 File Upload Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn about HTML5 file upload? Check out our Example on how to read info about files selected by users, and to upload the files on a server.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-26T11:15:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-06-19T07:08:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Remi Goyard\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mimiz33\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Remi Goyard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/\"},\"author\":{\"name\":\"Remi Goyard\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/ae15332f888fcdc376a8d4e03180e242\"},\"headline\":\"HTML5 File Upload Example\",\"datePublished\":\"2015-01-26T11:15:59+00:00\",\"dateModified\":\"2018-06-19T07:08:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/\"},\"wordCount\":1077,\"commentCount\":12,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/\",\"name\":\"HTML5 File Upload Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-01-26T11:15:59+00:00\",\"dateModified\":\"2018-06-19T07:08:34+00:00\",\"description\":\"Interested to learn about HTML5 file upload? Check out our Example on how to read info about files selected by users, and to upload the files on a server.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 File Upload Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/ae15332f888fcdc376a8d4e03180e242\",\"name\":\"Remi Goyard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/caa839a88ba9d485eec370ff8e020c314f10fb2e4ddedb3424a4bf92198259b2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/caa839a88ba9d485eec370ff8e020c314f10fb2e4ddedb3424a4bf92198259b2?s=96&d=mm&r=g\",\"caption\":\"Remi Goyard\"},\"description\":\"I'm a senior web architect. Passionated by new technologies, programming, devops tools, and agile methodologies. I really enjoy to coach, or teach, people who wants to learn programming, from beginners to skilled programmers. Involved in local developer communities, Java User Group, PHP User Group, or Javascript User Group, i like to share with others about experiences, news or business. Coding is FUN !\",\"sameAs\":[\"http:\/\/www.mimiz.fr\/\",\"http:\/\/fr.linkedin.com\/in\/remigoyard\/en\",\"https:\/\/x.com\/@mimiz33\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/remi-goyard\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 File Upload Example - Web Code Geeks - 2026","description":"Interested to learn about HTML5 file upload? Check out our Example on how to read info about files selected by users, and to upload the files on a server.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 File Upload Example - Web Code Geeks - 2026","og_description":"Interested to learn about HTML5 file upload? Check out our Example on how to read info about files selected by users, and to upload the files on a server.","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-01-26T11:15:59+00:00","article_modified_time":"2018-06-19T07:08:34+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Remi Goyard","twitter_card":"summary_large_image","twitter_creator":"@mimiz33","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Remi Goyard","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/"},"author":{"name":"Remi Goyard","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/ae15332f888fcdc376a8d4e03180e242"},"headline":"HTML5 File Upload Example","datePublished":"2015-01-26T11:15:59+00:00","dateModified":"2018-06-19T07:08:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/"},"wordCount":1077,"commentCount":12,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/","name":"HTML5 File Upload Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-01-26T11:15:59+00:00","dateModified":"2018-06-19T07:08:34+00:00","description":"Interested to learn about HTML5 file upload? Check out our Example on how to read info about files selected by users, and to upload the files on a server.","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-file-upload-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 File Upload Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/ae15332f888fcdc376a8d4e03180e242","name":"Remi Goyard","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/caa839a88ba9d485eec370ff8e020c314f10fb2e4ddedb3424a4bf92198259b2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/caa839a88ba9d485eec370ff8e020c314f10fb2e4ddedb3424a4bf92198259b2?s=96&d=mm&r=g","caption":"Remi Goyard"},"description":"I'm a senior web architect. Passionated by new technologies, programming, devops tools, and agile methodologies. I really enjoy to coach, or teach, people who wants to learn programming, from beginners to skilled programmers. Involved in local developer communities, Java User Group, PHP User Group, or Javascript User Group, i like to share with others about experiences, news or business. Coding is FUN !","sameAs":["http:\/\/www.mimiz.fr\/","http:\/\/fr.linkedin.com\/in\/remigoyard\/en","https:\/\/x.com\/@mimiz33"],"url":"https:\/\/www.webcodegeeks.com\/author\/remi-goyard\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2200"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2200\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}