Минимальная строка для обеспечения совместимости с большинством браузеров:
<input type="file" directory="" webkitdirectory="" mozdirectory="" />
Итак, мы знаем, что Chrome, браузеры с WebKit и Firefox совместимы с параметрами 'directory'. Тогда вам лучше придать ему стиль, потому что он будет отображаться как «Выбрать файлы».
Большинство веб-сайтов используют подход «поддельный файл»:
div.fileinputs
{
position: relative;
}
div.fakefile
{
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
Я знаю, что пост старый, но в настоящее время мы часто синхронизируем наши папки с некоторым облаком в Интернете, поэтому метод файл за файлом используется меньше.