HTML Input = "файл" Прийняти тип файлу атрибутів (CSV)

На моїй сторінці є об’єкт завантаження файлів:

<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)

Однак я не можу знайти правильний тип вмісту для файлу CSV Excel! Будь-які пропозиції?

ПРИКЛАД: http://jsfiddle.net/LzLcZ/

Ну, це бентежить ... Я знайшов рішення, яке шукав, і це не могло бути простішим. Я використовував наступний код, щоб отримати бажаний результат. Сподіваюся, це допоможе комусь у майбутньому. Дякуємо всім за допомогу.

<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 / тощо) використовуйте:

<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 ).

Якщо ви намагаєтеся відобразити певний тип файлу (наприклад, a WAVабо PDF), це майже завжди буде працювати ...

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

У ці дні ви можете просто використовувати розширення файлу

<input type="file" ID="fileSelect" accept=".xlsx, .xls, .csv"/>

Дом цей атрибут дуже старий і не прийнятий у сучасних браузерах, наскільки я знаю, але ось альтернатива цьому. Спробуйте це

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

Я думаю, це допоможе вам, звичайно, ви можете змінити цей сценарій відповідно до ваших потреб.

Я використовував text/comma-separated-valuesдля CSV mime-type в атрибуті accept, і він прекрасно працює в Opera. Спробував text/csvбез везіння.

Деякі інші типи MIME для CSV, якщо запропоновані не працюють:

• текст / знаки, розділені комами
• текст / csv
• додаток / csv
• заявка / відмінність
• застосування / vnd.ms-excel
• додаток / vnd.msexcel
• текст / будь-який текст

Джерело: http://filext.com/file-extension/CSV

У Safari 10 це не працювало для мене:

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

Я повинен був написати це замість цього:

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

Ви можете знати правильний тип вмісту для будь-якого файлу, виконавши наступне:

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);
}

Приймання атрибутів має деякі проблеми з декількома атрибутами, і в цьому випадку він не працює належним чином.

Я змінив рішення @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 у вхідному елементі.

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