HTML применить фильтр
<input type='file' name='userFile'>
теперь, когда я нажму кнопку browse, диалог browse покажет все файлы... что, если я хочу отфильтровать типы файлов, допустим
- только изображения или . png & .jpg & .gifs
- только офисные файлы типа .doc & .docx & .pps
как это сделать...
3 ответа
На элементах управления вводом файлов есть атрибут "accept", где вы можете указать типы файлов, которые вам нужны. Из того, что я вижу, многие браузеры предпочитают игнорировать его - типы файлов, которые можно указать, являются MIME-типами, поэтому строго корректный браузер должен будет просматривать каждый файл независимо от расширения и проверять, является ли он изображением (и если да, то какого он типа).
Обновление: Похоже, что по крайней мере некоторые версии всех основных браузеров на Windows теперь обеспечивают хотя бы некоторую поддержку атрибута accept. (Даже IE поддерживает его, начиная с версии 10.) Однако полагаться на него пока рановато, поскольку IE 8 и 9 все еще не поддерживают его. Да и в целом поддержка немного нестабильна.
- Chrome, похоже, имеет полную поддержку. Он использует свой собственный встроенный список типов, а также системный... так что если любой из них определяет тип, Chrome знает, какие файлы показывать.
- IE 10 прекрасно поддерживает расширения файлов и типы MIME. Однако, похоже, он использует только системное сопоставление MIME-типа с расширениями... что в основном означает, что если что-то на компьютере пользователя не зарегистрировало эти расширения с нужными MIME-типами, IE не будет показывать файлы этих MIME-типов.
- Opera, похоже, поддерживает только типы MIME - до такой степени, что расширения фактически отключают фильтр - и пользовательский интерфейс для селектора файлов отстойный. Вы должны выбрать тип, чтобы увидеть файлы этого типа.
- Похоже, что Firefox поддерживает только ограниченный набор типов и игнорирует другие типы, а также расширения.
У меня нет Safari, и я не планирую его скачивать. Если бы кто-нибудь мог задокументировать поддержку Safari...Частичная поддержка в Safari. http://caniuse.com/#search=accept
Вам стоит подумать о добавлении атрибута, чтобы браузеры, поддерживающие его, могли помочь пользователю легче найти нужные файлы. Но я бы все же предложил проверять имя файла после его выбора и показывать сообщение об ошибке, если загружен файл с неправильным расширением.
И, конечно же, сервер должен дважды проверить, что файл имеет правильный тип. Расширения файлов - это всего лишь соглашение об именовании, и его можно легко подменить. И даже если бы мы могли доверять браузеру (а мы не можем), и даже если бы он пытался фильтровать материал, как вы просили (а он может и не фильтровать), вероятность того, что он действительно проверит, что файл .doc действительно является документом Word, близка к нулю.
Вам следует использовать один из плагинов , которые используют встроенный Flash, поскольку вы не можете сделать это с помощью простого javascript
Вы не можете контролировать, какие файлы могут быть выбраны, но вы можете прочитать имя файла с помощью javascript после того, как файл будет выбран. Затем вы можете отобразить предупреждение и / или отключить кнопку отправки, если файл неправильного типа. Однако помните, что вы не можете полагаться на расширение, чтобы сказать вам, действительно ли файл правильного типа. Его следует рассматривать только как способ помочь пользователям, которые в противном случае могли бы тратить время на загрузку огромного файла, прежде чем обнаружат, что вы не поддерживаете этот тип файла.
Вот пример кода для этого. Он использует jQuery, но вы можете сделать то же самое и с простым javascript.
$(function() {
$('#inputId').change( function() {
var filename = $(this).val();
if ( ! /\.txt$/.test(filename)) {
alert('Please select a text file');
}
});
});