HTML Input = «file» Принять тип файла атрибута (CSV)

501

У меня есть объект загрузки файла на моей странице:

<input type="file" ID="fileSelect" />

со следующими файлами Excel на моем рабочем столе:

  1. file1.xlsx
  2. file1.xls
  3. 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/

Дом
источник
большинство браузеров не уважают атрибут accept, поскольку его можно использовать для защиты пользователей, которые не обращают внимания на передачу конфиденциальных файлов.
Тлетнес
9
@tletnes не соответствует действительности, это поддерживается большинством основных браузеров
Dom
Вы также можете попробовать это, если ($ .trim ($ ('# OriginalFileName'). Val ())! = "") {Var ext = $ ('# OriginalFileName'). Val (). Split ('.') .pop () toLowerCase (). if ($ .inArray (ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) {$ ('# OriginalFileNameValid'). html ('Use .doc .docx, .pdf файлы '); }}
Нитин Пол
В случае, если другие пользователи Ubuntu смущаются из-за этого, я обнаружил, что в Ubuntu Firefox по умолчанию показывает «Все файлы», но добавляет любой ваш атрибут «accept» в раскрывающийся список типов файлов в диалоге выбора файлов.
млцы

Ответы:

1248

Ну, это смущает ... Я нашел решение, которое искал, и оно не могло быть проще. Я использовал следующий код, чтобы получить желаемый результат. Надеюсь, это поможет кому-то в будущем. Спасибо всем за вашу помощь.

<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />  

Допустимые типы принятия:

Для файлов CSV (.csv) используйте:

<input type="file" accept=".csv" />

Для файлов Excel 97-2003 (.xls) используйте:

<input type="file" accept="application/vnd.ms-excel" />

Для файлов Excel 2007+ (.xlsx) используйте:

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

Для текстовых файлов (.txt) используйте:

<input type="file" accept="text/plain" />

Для файлов изображений (.png / .jpg / etc) используйте:

<input type="file" accept="image/*" />

Для файлов HTML (.htm, .html) используйте:

<input type="file" accept="text/html" />

Для видеофайлов (.avi, .mpg, .mpeg, .mp4) используйте:

<input type="file" accept="video/*" />

Для аудиофайлов (.mp3, .wav и т. Д.) Используйте:

<input type="file" accept="audio/*" />

Для файлов PDF используйте:

<input type="file" accept=".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=".FILETYPE" />
Дом
источник
3
Кажется, что Chrome поддерживает этот атрибут, но Firefox все еще работает над ним. Вы можете проголосовать за эту ошибку, чтобы они решили ее быстрее: bugzilla.mozilla.org/show_bug.cgi?id=826176
Salvatorelab
3
@DavidRouten атрибут accept будет просто фильтровать типы файлов. Вам также придется использовать проверку файлов, чтобы пользователи не могли выбирать другие типы файлов. Надеюсь, это поможет!
Дом
1
<input type = "file" accept = ". csv" /> не работает в Firefox. Есть ли другое решение, чтобы сделать, как работает это в Firefox.
Ганеса Виджаякумар
1
<input type="file" accept=".csv, text/csv" />работал для меня в Firefox, Chrome и Opera на Mac. только .csv не работал во всех браузерах.
ТМАС
1
Можете ли вы добавить пример для файла "XML"? Это будет полезно. Заранее спасибо.
августа
161

В эти дни вы можете просто использовать расширение файла

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>
Большие деньги
источник
3
Хотя это удивительно, но это (и альтернатива 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/…
SharpC
38

Dom этот атрибут очень старый и не принят в современных браузерах, насколько я знаю, но вот альтернатива ему, попробуйте это

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls", ".csv");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    }
    else return true;
}
</script>

<input type="file" id="file" onchange="checkfile(this);" />

Я думаю, это поможет вам, конечно, вы можете изменить этот скрипт в соответствии с вашими потребностями.

йог
источник
5
Классный обходной путь, но я не понимаю, почему такой атрибут считается «старым». Это базовая функция выбора файлов практически во всех ОС, браузеры должны сделать все возможное, чтобы она работала, и это помогло бы многим пользователям ...
Кристоф Руссси,
1
Атрибут accept не старый и поддерживается в основных браузерах, кроме IE / Edge: caniuse.com/#feat=input-file-accept . Пожалуйста, перефразируйте ваш ответ, поскольку он вводит в заблуждение.
Тома
2
Наиболее важным аспектом acceptатрибута является подсказка, которую он предоставляет диалогу открытого файла. По умолчанию пользователю должны быть предоставлены подходящие файлы, предположительно с возможностью выбора других типов, если они того пожелают - именно так ведут себя большинство современных браузеров.
Coderer
13

Я использовал text/comma-separated-valuesдля MIME-типа CSV в атрибуте accept, и он прекрасно работает в Opera. Пробовал text/csvбез удачи.

Некоторые другие MIME-типы для CSV, если предложенные не работают:

  • Текст / разделенный запятыми-значение
  • текст / CSV
  • Приложение / CSV
  • Приложение / первенствует
  • применение / vnd.ms-первенствуйте
  • Приложение / vnd.msexcel
  • текст / anytext

Источник: http://filext.com/file-extension/CSV

jaysponsored
источник
1
Привет, Дом! Я хочу извиниться, потому что ваш ответ (помечен как правильный) в порядке, и я не обращаю на это особого внимания, потому что я тестировал сайт только в Opera. После тестирования в других браузерах, я вижу, что ваш ответ более полный. Но это работает не во всех браузерах. Firefox 17 не поддерживает прием и настройку фильтра в диалоге файлов ( bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ), поэтому для меня это свойство не подходит. В любом случае, я буду использовать проверку файлов javascript, но использую text / csv в accept attr, потому что это значение по умолчанию IANA iana.org/assignments/media-types
jaysponsored
11

Это не сработало для меня в Safari 10:

<input type="file" accept=".csv" />

Я должен был написать это вместо этого:

<input type="file" accept="text/csv" />
троянский
источник
Hii ,,, это работает хорошо на моем сафари тоже. Но как, если мы хотим принять документы Excel? у вас есть какие-либо подсказки? @trojan
gustav
Проверьте ответ Big Money. TLDR; <input type = "file" ID = "fileSelect" accept = ". xlsx, .xls, .csv" />
Sk. Ирфан
4

Вы можете узнать правильный тип содержимого для любого файла, просто выполнив следующее:

1) Выберите интересующий файл,

2) И запустить в консоли это:

console.log($('.file-input')[0].files[0].type);

Вы также можете установить атрибут «несколько» для ввода, чтобы проверить тип содержимого для нескольких файлов одновременно и сделать следующее:

for (var i = 0; i < $('.file-input')[0].files.length; i++){
    console.log($('.file-input')[0].files[i].type);
}

Атрибут accept имеет некоторые проблемы с несколькими атрибутами и в этом случае работает неправильно.

Ольга Лисовская
источник
1

Я изменил решение @yogi. Кроме того, когда файл имеет неправильный формат, я сбрасываю значение элемента ввода.

function checkFile(sender, validExts) {
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0 && fileExt != "") {
        alert("Invalid file selected, valid files are of " +
                 validExts.toString() + " types.");
        $(sender).val("");
        return false;
    }
    else return true;
}

У меня есть встроенная проверка, потому что в открытом окне файла пользователь все еще может выбрать параметры «Все файлы ('*')», независимо от того, явно ли я установил атрибут accept в элементе input.

RenatoIvancic
источник
0

Теперь вы можете использовать новый атрибут проверки ввода html5 pattern=".+\.(xlsx|xls|csv)".

Шв
источник
10
По MDN , Что 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.
Dom