File input accept excel

Well this is embarrassing… I found the solution I was looking for and it couldn’t be simpler. I used the following code to get the desired result.

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

Valid Accept Types:

For CSV files (.csv), use: 

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

For Excel Files 97-2003 (.xls), use: 

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

For Excel Files 2007+ (.xlsx), use: 

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

For Text Files (.txt) use: 

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

For Image Files (.png/.jpg/etc), use: 

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

For HTML Files (.htm,.html), use:

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

For Video Files (.avi, .mpg, .mpeg, .mp4), use:

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

For Audio Files (.mp3, .wav, etc), use:

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

For PDF Files, use:

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

DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/

NOTE:

If you are trying to display Excel CSV files (.csv), do NOT use:

  • text/csv
  • application/csv
  • text/comma-separated-values (works in Opera only).

If you are trying to display a particular file type (for example, a WAV or PDF), then this will almost always work…

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

Here’s the reason why it is so:

The application types often mean where to open the file.
For example, Abode Reader.
But when this file is uploaded, the browser doesn’t care about opening and asking that app about it. But the extension, however, or type words like the MIME image or audio etcetera work applying directly to file units.

It is possible to use them in relation to a File DOM instance.
So, you should use the extension format name.
On many devices, like mobiles, it is seen when you click select File, that the non- accepted files in the user menu are excluded in grey…
Have a great time spent with your files!

Источник

Input file accept specified file type XLS, XLSX, PPT, PPTX, DOC, DOCX, PDF, CSV, Pictures, HTML

tags: front end  html

.xls
<input type="file" accept="application/vnd.ms-excel" />
.xlsx
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
.ppt
<input type="file" accept="application/vnd.ms-powerpoint" />
.pptx
<input type="file" accept="application/vnd.openxmlformats-officedocument.presentationml.presentation" />
.doc
<input type="file" accept="application/msword" />
.docx
<input type="file" accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
.pdf
<input type="file" accept="application/pdf" />
.csv
<input type="file" accept=".csv" />
.png/.jpg/.jpeg/.etc
<input type="file" accept="image/*" />
.txt
<input type="file" accept="text/plain" />
.htm/.html
<input type="file" accept="text/html" />
.avi/.mpg/.mpeg/.mp4
<input type="file" accept="video/*" />
.mp3/.wav/.etc
<input type="file" accept="audio/*" />

Intelligent Recommendation

Java operations on doc, docx, ppt, pptx, xls, xlsx

Foreword: Usually we use the apache POI library to operate the above documents, apache POI official website apache POI official website It is recommended to download and import to the project from the…

Read DOC, DOCX, XLS, XLSX, PDF, PPTX, TXT document content

Read DOC, DOCX, XLS, XLSX, PDF, PPTX, TXT document content Pom dependence Code…

More Recommendation

Copyright  DMCA © 2018-2023 — All Rights Reserved — www.programmersought.com  User Notice

Top

Источник

Содержание

  1. Атрибут accept в input type file
  2. HTML Input=»file» Accept Attribute File Type (CSV)
  3. 12 Answers 12
  4. Valid Accept Types:
  5. How to make input type= file Should accept only pdf and xls
  6. 10 Answers 10
  7. Input file accept excel
  8. Поле ввода даты
  9. Поле ввода адреса электронной почты
  10. Файл FILE
  11. Скрытое поле HIDDEN
  12. Поле ввода чисел NUMBER
  13. Поле ввода пароля PASSWORD
  14. Переключатель RADIO
  15. Ползунок RANGE
  16. Кнопка RESET
  17. Кнопка SUBMIT
  18. Поле ввода TEXT
  19. Фильтр для input file
  20. Применяется
  21. Значения

Атрибут accept в input type file

Привет! Недавно я писал статью об отправке файлов на почту, через форму обратной связи (вот она). В ней, я упоминал об атрибуте accept, который позволяет фильтровать файлы, загружаемые в форму. То есть можно указать определенный тип файла и при поиске на компьютере, пользователю будут показываться файлы только этого типа данных. Надеюсь понятно объяснил — приступим.

Для того чтобы ограничить форму на добавление только картинок, музыкальных или видео файлов следует в accept дописать (image/*), (audio/*) или (video/*):

В таком случае, пользователю при выборе файла будут показываться только указанный тип данных. Я протестировал данный вид записи в последних версиях Google Chrom, Яндекс Браузер, Opera, Firefox Developer Edition и Explorer. Как думаете, в каком из браузеров не работает подобный фильтр? Правильно! Во всех протестированных браузер — все отлично работает. Вы же так и подумали?

Уже не плохо. Давайте копнем глубже и попробуем указать формат. Для картинки укажу png, для аудио — mp3, а для видео mp4 и проверю.

И знаете, что произошло? Все справились на отлично, кроме. Барабанная дробь. Кроме Firefox, что стало большим удивлением для меня. Но ничего не поделать. Двигаемся дальше.

Для фильтра по документам pdf и doc, docx воспользуйтесь следующей структурой:

Все, кроме мозилы — отлично справились. Давайте позволим нашей форме работать еще и с Excel. Для это пишем:

Таким образом, наша форма стала понимать pdf, файлы MS Word и Excel. Конечно, для того, чтобы данная форма была универсальной и технологичной нужно проверять ее при помощи javascript или в обработчике, но для небольших проектов вполне сгодится и данный способ. Надеюсь статья для вас окажется полезной. А на сегодня — все. Всем пока!

Источник

HTML Input=»file» Accept Attribute File Type (CSV)

I have a file upload object on my page:

with the following excel files on my desktop:

I want the file upload to ONLY show .xlsx , .xls , & .csv files.

Using the accept attribute, I found these content-types took care of .xlsx & .xls extensions.

accept = application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.XLSX)

accept = application/vnd.ms-excel (.XLS)

However, I cannot find the correct content-type for an Excel CSV file! Any suggestions?

12 Answers 12

Well this is embarrassing. I found the solution I was looking for and it couldn’t be simpler. I used the following code to get the desired result.

Valid Accept Types:

For CSV files (.csv), use:

For Excel Files 97-2003 (.xls), use:

For Excel Files 2007+ (.xlsx), use:

For Text Files (.txt) use:

For Image Files (.png/.jpg/etc), use:

For HTML Files (.htm,.html), use:

For Video Files (.avi, .mpg, .mpeg, .mp4), use:

For Audio Files (.mp3, .wav, etc), use:

For PDF Files, use:

If you are trying to display Excel CSV files ( .csv ), do NOT use:

  • text/csv
  • application/csv
  • text/comma-separated-values (works in Opera only).

If you are trying to display a particular file type (for example, a WAV or PDF ), then this will almost always work.

Here’s the reason why it is so:

The application types often mean where to open the file. For example, Abode Reader. But when this file is uploaded, the browser doesn’t care about opening and asking that app about it. But the extension, however, or type words like the MIME image or audio etcetera work applying directly to file units.

It is possible to use them in relation to a File DOM instance. So, you should use the extension format name. On many devices, like mobiles, it is seen when you click select File, that the non- accepted files in the user menu are excluded in grey. Have a great time spent with your files!

Источник

How to make input type= file Should accept only pdf and xls

Now I would like to restrict this by accepting only .pdf and .xls files.

When I click the submit button it should validate this.

And when I click the files (PDF/XLS) on webpage it should automatically open.

Could anyone please give some examples for this?

10 Answers 10

You could do so by using the attribute accept and adding allowed mime-types to it. But not all browsers do respect that attribute and it could easily be removed via some code inspector. So in either case you need to check the file type on the server side (your second question).

To your third question «And when I click the files (PDF/XLS) on webpage it automatically should open.»:

You can’t achieve that. How a PDF or XLS is opened on the client machine is set by the user.

you can use this:

HTML

support only .PDF and .XLS files

Unfortunately, there is no guaranteed way to do it at time of selection.

Some browsers support the accept attribute for input tags. This is a good start, but cannot be relied upon completely.

You can use a cfinput and run a validation to check the file extension at submission, but not the mime-type. This is better, but still not fool-proof. Files on OSX often have no file extensions or users could maliciously mislabel the file types.

Источник

Input file accept excel

Это поле, которое позволяет выбрать цвет.

Пример

Атрибут value используют для установки исходного цвета, его можно не указывать.

Поле ввода даты

Поле типа date позволяет ввести дату с помощью календаря.

Можно задать нижнюю и верхнюю границу диапазона дат атрибутами min и max.

Пример

Поле ввода адреса электронной почты

Для ввода нескольких адресов можно добавить атрибут multiple, при этом для разделения адресов используется запятая (,)

Пример

Файл FILE

Позволяет передать сценарию любой файл. Максимальный размер файла в байтах задается скрытым полем max_file_size.

Пример

Сценарий получения файла на PHP:

Для указания возможных типов файлов используется атрибут accept:
Для CSV files (.csv), используйте: Для Excel Files 2003-2007 (.xls), используйте: Для Excel Files 2010 (.xlsx), используйте: Для Text Files (.txt) используйте: Для Image Files (.png/.jpg/etc), используйте: Для HTML Files (.htm,.html), используйте: Для Video Files (.avi, .mpg, .mpeg, .mp4), используйте: Для Audio Files (.mp3, .wav, etc), используйте: Для PDF Files, используйте:

Браузер Chrome понимает дополнительные атрибуты «webkitdirectory directory«, указание которых у input позволяет выбирать целые папки:

Скрытое поле HIDDEN

Это специальный (скрытый) тип текстового поля. Если один сценарий обрабатывает несколько разных форм, то в скрытом поле каждой формы можно указать идентификатор, который позволит определить, с какой формой вы имеете дело.

Пример

Браузер не отображает скрытое поле, хотя его можно обнаружить, если перевести броузер в режим просмотра HTML-файла и проанализировать текст Web-страницы. Скрытые поля полезны, если необходимо указать требуемую для сценария информацию, но при этом нежелательно, чтобы пользователь имел возможность вносить в нее изменения. Однако учтите, что сообразительный пользователь может сохранить вашу форму в файле, отредактировать его, а затем передать эту форму серверу в измененном виде. Поэтому не стоит полагаться на скрытые поля с целью создания какой-либо защиты.

Пример

Сценарий получит переменную с именем FormVersion, которой будет присвоено значения 1.2. Эта информация может использоваться для определения способа обработки остальной информации, полученной от формы. Если пользователь изменит это значение, то программа сценария может повести себя неожиданным образом.

Поле ввода чисел NUMBER

Поле предназначено для ввода чисел. Дробная часть при вводе может отделяться как точкой (2.5), так и запятой (2,5). Если пользователь введет буквы, то отправить форму на сервер не удастся.

Пример

Можно задать минимальное, максимальное значение поля и шаг изменения числа. Значение шага может быть как целым, так и дробным, но должно быть больше 0. Если введенное в поле число не будет отвечать заданным ограничениям, то отправка на сервер не произойдет.

Пример

Для задания любого шага используйте step=»any».

Пример

Поле number отображается по-разному: некоторые браузеры показывают стрелочки всегда, некоторые – только при наведении или получении полем фокуса.

Если нужно, чтобы стрелочки в поле number были всегда, задайте стиль:

Если нужно убрать стрелочки в поле number, задайте стиль:

Поле ввода пароля PASSWORD

Поле ввода пароля очень похоже на простое текстовое поле. Отличается оно тем, что вместо вводимых символов в нем отображаются точки. Такая возможность очень важна, когда нужно ввести секретную информацию, типа пароля, которую не должны видеть другие.

Пример

Переключатель RADIO

Переключатель напоминает флажок, поскольку он тоже может находиться во включенном или выключенном состоянии.

По смыслу всегда предполагается, что в форме имеется несколько переключателей с одинаковым атрибутом name. У каждого из них свое значение атрибута value. Группа переключателей с одним и тем же именем в форме ведет себя таким образом, что только один из них может быть включенным. При передаче данных передается значение только выбранного переключателя.

Один переключатель из группы может быть изначально выбран по умолчанию с помощью атрибута checked.

Пример

Ползунок RANGE

Поле предназначено для ввода числа в указанном диапазоне.

Можно задать минимальное значение (по умолчанию 0), максимальное значение (по умолчанию 100), шаг изменения числа (по умолчанию 1) и текущее значение (по умолчанию среднее арифметическое минимального и максимального значений).

Пример

Ползунок сам по себе не даёт пользователю представление, какое же число он выбрал. Поэтому здесь без JavaScript не обойтись.

Пример

Поле range отображается разными браузерами по-разному.

Если хотите своё оформление, задайте стили для ползунка:

Но победить до конца стили IE11 не удастся!

Кнопка RESET

Это кнопка очистки формы. При ее нажатии всем измененным элементам возвращается значение по умолчанию. Применяется она достаточно редко. Однако в некоторых случаях может быть весьма полезна.

Совет: осторожно относитесь к выбору надписи на кнопке RESET. Вполне наглядным (и, главное, интуитивно понятным даже чайнику из чайников) будет что-нибудь вроде «Очистить», «Начать сначала», «Удалить ввод» и т.п. В общем, надо, чтобы у пользователя не закралось и тени сомнения относительно предназначения этой клавиши.

Пример

Кнопка SUBMIT

Эта кнопка предназначена для передачи формы. В большинстве браузеров внешне почти не отличима от кнопки BUTTON. Сама она не передается, а служит только для управления.

Атрибут onclick для кнопки SUBMIT практически не используется, так как лучше использовать обработчик событий onsubmit, заданный в теге

Атрибут value дает определенные преимущества при использовании более одной кнопки передачи данных. В этом случае на основании значения полученной переменной сценарий сможет определить, как обрабатывать полученную информацию далее.

Пример

Атрибут formnovalidate может быть применен, чтобы предотвратить проверку значений формы.

Пример

Поле ввода TEXT

Текстовое поле ввода используется в формах наиболее часто. Более того, его можно по праву считать основным и главнейшим элементом форм. Этот тип используется тегом по умолчанию, его можно не указывать, чтобы вывести текстовое поле. Однако, если возникнет необходимость задать стиль для селектора input[type=»text»], то тогда атрибут type=»text» пропускать нельзя.
Имя поля, задаваемое атрибутом name, всегда обязательно, так как базируясь именно на этом параметре, браузер передает сценарию пару имя=значение.

Пример

Текст «Иванов» помещается в созданное поле в качестве начального значения. Если пользователь не внесет изменений или нажмет кнопку RESET, то значение Иванов будет отправлено сценарию в качестве фамилии пользователя.

Источник

Фильтр для input file

Для того чтобы указать какие файлы можно выбрать в input можно использовать тег «accept».

Он устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов. Тип файла указывается как MIME-тип, при нескольких значениях они перечисляются через запятую. Если файл не подходит под установленный фильтр, он не показывается в окне выбора файлов.

Применяется

К полю для отправки файла ( )

Значения

Имя MIME-типа в любом регистре, несколько значений перечисляются через запятую.

Хотя можно установить ширину поля через атрибут size , в действительности ширина никак не влияет на результат работы формы. В браузерах Safari и Chrome этот атрибут вообще никакого воздействия не оказывает.

Атрибут multiple более важен, он позволяет не ограничиваться одним файлом для выбора, а указать их сразу несколько для одновременной загрузки.

Если атрибут accept не указывать, тогда добавляются и загружаются файлы любого типа. Наличие accept позволяет ограничить выбор файла, что особенно важно, когда требуется загрузить только изображение или видео. В качестве значения выступает MIME-тип, несколько значений разделяются между собой запятой. Также можно использовать следующие ключевые слова:

  • audio/* — выбор музыкальных файлов любого типа;
  • image/* — графические файлы;
  • video/* — видеофайлы.

В таблице показаны некоторые допустимые значения атрибута accept .

Значение Описание
image/jpeg Только файлы в формате JPEG.
image/jpeg,image/png Только файлы в формате JPEG и PNG.
image/* Любые графические файлы.
image/*,video/* Любые графические и видеофайлы.

Таблица Типы файлов

MIME (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета) — спецификация для передачи по сети файлов различного типа: изображений, музыки, текстов, видео, архивов и др. Указание MIME-типа используется в HTML обычно при передаче данных форм и вставки на страницу различных объектов.

Некоторые популярные MIME-типы и расширения файлов с ними связанных приведены в таблице.

Источник

Источник

try below 

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

Or you could use javascript to check the file type 

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".xlsx", ".xls");
    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"  önchange="checkfile(this);" />
Источник

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

<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" />

DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/

ПРИМЕЧАНИЕ:

Если вы пытаетесь отобразить файлы CSV Excel (.csv), используйте НЕ:

  • text/csv
  • application/csv
  • text/comma-separated-values (работает только в Opera).

Если вы пытаетесь отобразить определенный тип файла (например, WAV или PDF), тогда это почти всегда будет работать…

 <input type="file" accept=".FILETYPE" />
Источник

Понравилась статья? Поделить с друзьями:
  • File information in excel
  • File in use word document
  • File formats supported by excel
  • File formats for excel
  • File formats excel can open