У меня есть объект загрузки файла на моей странице:
<input type="file" ID="fileSelect" />
со следующими файлами Excel на моем рабочем столе:
- file1.xlsx
- file1.xls
- file.csv
Я хочу , чтобы загрузить файл только показать .xlsx
, .xls
, & .csv
файлы.
Используя accept
атрибут, я обнаружил, что эти типы контента позаботились о .xlsx
& .xls
расширениях ...
accept
= application / vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)
accept
= application / vnd.ms-excel (.XLS)
Однако я не могу найти правильный тип содержимого для файла Excel CSV! Какие-либо предложения?
ПРИМЕР: http://jsfiddle.net/LzLcZ/
Ответы:
Ну, это смущает ... Я нашел решение, которое искал, и оно не могло быть проще. Я использовал следующий код, чтобы получить желаемый результат. Надеюсь, это поможет кому-то в будущем. Спасибо всем за вашу помощь.
Допустимые типы принятия:
Для файлов CSV (.csv) используйте:
Для файлов Excel 97-2003 (.xls) используйте:
Для файлов Excel 2007+ (.xlsx) используйте:
Для текстовых файлов (.txt) используйте:
Для файлов изображений (.png / .jpg / etc) используйте:
Для файлов HTML (.htm, .html) используйте:
Для видеофайлов (.avi, .mpg, .mpeg, .mp4) используйте:
Для аудиофайлов (.mp3, .wav и т. Д.) Используйте:
Для файлов PDF используйте:
ДЕМО:
http://jsfiddle.net/dirtyd77/LzLcZ/144/
НОТА:
Если вы пытаетесь отобразить файлы Excel CSV (
.csv
), НЕ используйте:text/csv
application/csv
text/comma-separated-values
( работает только в Опере ).Если вы пытаетесь отобразить файл определенного типа (например, a
WAV
илиPDF
), то это почти всегда будет работать ...источник
<input type="file" accept=".csv, text/csv" />
работал для меня в Firefox, Chrome и Opera на Mac. только .csv не работал во всех браузерах.В эти дни вы можете просто использовать расширение файла
источник
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel
) по-прежнему не работает на Edge 41.16299.820.0 stackoverflow.com/questions/31875617/… wpdev.uservoice.com/forums/257854-microsoft-edge-developer/…Dom этот атрибут очень старый и не принят в современных браузерах, насколько я знаю, но вот альтернатива ему, попробуйте это
Я думаю, это поможет вам, конечно, вы можете изменить этот скрипт в соответствии с вашими потребностями.
источник
accept
атрибута является подсказка, которую он предоставляет диалогу открытого файла. По умолчанию пользователю должны быть предоставлены подходящие файлы, предположительно с возможностью выбора других типов, если они того пожелают - именно так ведут себя большинство современных браузеров.Я использовал
text/comma-separated-values
для MIME-типа CSV в атрибуте accept, и он прекрасно работает в Opera. Пробовалtext/csv
без удачи.Некоторые другие MIME-типы для CSV, если предложенные не работают:
Источник: http://filext.com/file-extension/CSV
источник
Это не сработало для меня в Safari 10:
Я должен был написать это вместо этого:
источник
Вы можете узнать правильный тип содержимого для любого файла, просто выполнив следующее:
1) Выберите интересующий файл,
2) И запустить в консоли это:
Вы также можете установить атрибут «несколько» для ввода, чтобы проверить тип содержимого для нескольких файлов одновременно и сделать следующее:
Атрибут accept имеет некоторые проблемы с несколькими атрибутами и в этом случае работает неправильно.
источник
Я изменил решение @yogi. Кроме того, когда файл имеет неправильный формат, я сбрасываю значение элемента ввода.
У меня есть встроенная проверка, потому что в открытом окне файла пользователь все еще может выбрать параметры «Все файлы ('*')», независимо от того, явно ли я установил атрибут accept в элементе input.
источник
Теперь вы можете использовать новый атрибут проверки ввода html5
pattern=".+\.(xlsx|xls|csv)"
.источник
This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.
касается ввода имени файла, они продолжают говоритьfile: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.