File inputs can have an attribute of “multiple” which then allows multiple files to be selected in the file section dialog box. Firefox 3.6+ and WebKit browsers only are supporting it so far. Unfortunately the “multiple files” need to be within the same folder, as there is no interface for selecting one, moving folders, and selecting another.<\/p>\n
<form method=\"post\" action=\"upload.php\" enctype=\"multipart\/form-data\">\r\n <input name='uploads[]' type=\"file\" multiple>\r\n <input type=\"submit\" value=\"Send\">\r\n<\/form><\/code><\/pre>\nNote that the “name” of the file input has brackets at the end of it. This isn’t required per the spec but is required to process the multiple files.<\/p>\n
In PHP, you can then loop through the data as an array:<\/p>\n
foreach ($_FILES['uploads']['name'] as $filename) {\r\n echo '<li>' . $filename . '<\/li>';\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"File inputs can have an attribute of “multiple” which then allows multiple files to be selected in the file section dialog box. Firefox 3.6+ and WebKit browsers only are supporting it so far. Unfortunately the “multiple files” need to be within the same folder, as there is no interface for selecting one, moving folders, and […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3231,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":3783,"url":"https:\/\/css-tricks.com\/snippets\/php\/find-highest-numerically-named-file\/","url_meta":{"origin":6935,"position":0},"title":"Find Highest Numerically Named File","date":"September 4, 2009","format":false,"excerpt":"$latest = getNewest(\"\/path\/to\/folder\/*_bla.xml\"); function getNewest($xmlfile){ foreach (glob($xmlfile) as $filename) { $c = explode('_', basename($filename)); $files[$c[0]] = $filename; } ksort($files, SORT_NUMERIC); $latest = array_pop($files); if (file_exists($latest)){ return $latest; } return false; } In a folder are files named: 1_bla.xml 2_bla.xml ... 34_bla.xml The function returns the file with the biggest numeric\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4482,"url":"https:\/\/css-tricks.com\/snippets\/php\/display-styled-directory-contents\/","url_meta":{"origin":6935,"position":1},"title":"Display Styled Directory Contents","date":"October 22, 2009","format":false,"excerpt":"Servers can be configured to show the contents of a directory that doesn't have an index file to render. The result is usually less than visually spectacular: Lackluster default in Chrome More better, View Demo We can take control of this ourselves by replicating this functionality with PHP. Make an\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2009\/10\/betterized.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3363,"url":"https:\/\/css-tricks.com\/snippets\/php\/find-file-extension\/","url_meta":{"origin":6935,"position":2},"title":"Find File Extension","date":"August 11, 2009","format":false,"excerpt":"Method 1 function findexts ($filename) { $filename = strtolower($filename) ; $exts = split(\"[\/\\\\.]\", $filename) ; $n = count($exts)-1; $exts = $exts[$n]; return $exts; } Method 2 $filename = 'mypic.gif'; $ext = pathinfo($filename, PATHINFO_EXTENSION); Method 3 function getFileextension($file) { return end(explode(\".\", $file)); }","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3932,"url":"https:\/\/css-tricks.com\/snippets\/php\/check-if-file-exists-append-number-to-name\/","url_meta":{"origin":6935,"position":3},"title":"Check if File Exists \/ Append Number to Name","date":"September 8, 2009","format":false,"excerpt":"If the file name exists, returns new file name with _number appended so you don't overwrite it. function file_newname($path, $filename){ if ($pos = strrpos($filename, '.')) { $name = substr($filename, 0, $pos); $ext = substr($filename, $pos); } else { $name = $filename; } $newpath = $path.'\/'.$filename; $newname = $filename; $counter =\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":6935,"position":4},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":254227,"url":"https:\/\/css-tricks.com\/snippets\/svg\/abobe-illustrator-export-options\/","url_meta":{"origin":6935,"position":5},"title":"Adobe Illustrator Export Options","date":"May 4, 2017","format":false,"excerpt":"This is less of a snippet and more of a reminder for something I look up often. When creating SVG files in Adobe Illustrator, there are a couple of different methods for exporting the files. Both methods include a handful of options, some of which I totally forget what they\u2026","rel":"","context":"In \"illustrator\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6935"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=6935"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6935\/revisions"}],"predecessor-version":[{"id":6937,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6935\/revisions\/6937"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3231"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=6935"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=6935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}