{"id":1529,"date":"2018-10-23T08:28:47","date_gmt":"2018-10-23T07:28:47","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1529"},"modified":"2018-10-23T13:04:35","modified_gmt":"2018-10-23T12:04:35","slug":"html-multiple-file-upload-example","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/html-multiple-file-upload-example\/","title":{"rendered":"Html multiple file upload example"},"content":{"rendered":"<pre class=\"lang:xhtml decode:true \" title=\"FileUploadExample.js\">&lt;div&gt;\r\n\t&lt;div&gt;\r\n\t\tSelect an image file:\r\n\t\t&lt;input type=\"file\" id=\"fileInput\" multiple&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div id=\"files\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n\tconst $add = (p, type, text) =&gt; {\r\n\t\tconst t = document.createTextNode(text);\r\n\t\tconst e = document.createElement(type);\r\n\t\te.appendChild(t);\r\n\t\tp.appendChild(e);\r\n\t};\r\n\twindow.addEventListener('load', () =&gt; {\r\n\t\tconst fileInput = document.getElementById('fileInput');\r\n\t\tconst fileBox = document.getElementById('files');\r\n\t\tfileInput.addEventListener('change', function(e) {\r\n\t\t\tconst files = Array.from(fileInput.files);\r\n\t\t\tfiles.forEach((file) =&gt; {\r\n\t\t\t\tconst imageType = \/image.*\/;\r\n\t\t\t\tif (file.type.match(imageType)) {\r\n\t\t\t\t\tconst reader = new FileReader();\r\n\t\t\t\t\treader.addEventListener('load', () =&gt; {\r\n\t\t\t\t\t\tconst img = new Image();\r\n\t\t\t\t\t\timg.src = reader.result;\r\n\t\t\t\t\t\t$add(fileBox, 'div', `[${file.name} ${file.size} ${file.type} ${file.lastModified}]`);\r\n\t\t\t\t\t\tfileBox.appendChild(img);\r\n\t\t\t\t\t});\r\n\t\t\t\t\treader.readAsDataURL(file);\r\n\t\t\t\t} else {\r\n\t\t\t\t\t$add(fileBox, 'div', `[${file.name} ${file.size} ${file.type} ${file.lastModified}]`);\r\n\t\t\t\t\t$add(fileBox, 'div', \"Displaying file not supported!\");\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t});\r\n\t});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;div&gt; &lt;div&gt; Select an image file: &lt;input type=&#8221;file&#8221; id=&#8221;fileInput&#8221; multiple&gt; &lt;\/div&gt; &lt;div id=&#8221;files&#8221;&gt;&lt;\/div&gt; &lt;\/div&gt; &lt;script&gt; const $add = (p, type, text) =&gt; { const t = document.createTextNode(text); const e = document.createElement(type); e.appendChild(t); p.appendChild(e); }; window.addEventListener(&#8216;load&#8217;, () =&gt; { const fileInput = document.getElementById(&#8216;fileInput&#8217;); const fileBox = document.getElementById(&#8216;files&#8217;); fileInput.addEventListener(&#8216;change&#8217;, function(e) { const files = Array.from(fileInput.files); files.forEach((file) =&gt; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-1529","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1529","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1529"}],"version-history":[{"count":2,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1529\/revisions"}],"predecessor-version":[{"id":1534,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1529\/revisions\/1534"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}