Input HTML = "file" Terima Jenis File Atribut (CSV)

Saya memiliki objek unggah file di halaman saya:

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

dengan file excel berikut di desktop saya:

1. file1.xlsx
2. file1.xls
3. file.csv

Saya ingin upload file HANYA menunjukkan .xlsx, .xls, & .csvfile.

Menggunakan acceptatribut, saya menemukan tipe konten ini merawat .xlsx& .xlsekstensi ...

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

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

Namun, saya tidak dapat menemukan tipe konten yang benar untuk file Excel CSV! Ada saran?

CONTOH: http://jsfiddle.net/LzLcZ/

Yah ini memalukan ... Saya menemukan solusi yang saya cari dan tidak bisa lebih sederhana. Saya menggunakan kode berikut untuk mendapatkan hasil yang diinginkan. Semoga ini bisa membantu seseorang di masa depan. Terima kasih semuanya atas bantuan Anda.

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

Jenis Penerimaan yang Valid:

Untuk file CSV (.csv), gunakan:

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

Untuk File Excel 97-2003 (.xls), gunakan:

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

Untuk Excel Files 2007+ (.xlsx), gunakan:

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

Untuk File Teks (.txt) gunakan:

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

Untuk File Gambar (.png / .jpg / etc), gunakan:

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

Untuk File HTML (.htm, .html), gunakan:

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

Untuk File Video (.avi, .mpg, .mpeg, .mp4), gunakan:

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

Untuk File Audio (.mp3, .wav, dll), gunakan:

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

Untuk File PDF , gunakan:

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

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

CATATAN:

Jika Anda mencoba menampilkan file Excel CSV ( .csv), JANGAN gunakan:

• text/csv
• application/csv
• text/comma-separated-values(hanya berfungsi di Opera ).

Jika Anda mencoba untuk menampilkan jenis file tertentu (misalnya, a WAVatau PDF), maka ini hampir selalu berfungsi ...

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

Saat ini Anda hanya dapat menggunakan ekstensi file

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

Dom atribut ini sangat tua dan tidak diterima di browser modern sejauh yang saya tahu, Tapi di sini ada alternatif untuk itu, Coba ini

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

Saya kira itu akan membantu Anda tentu saja Anda dapat mengubah skrip ini sesuai dengan kebutuhan Anda.

Saya telah menggunakan text/comma-separated-valuesCSime mime-type di accept attribute dan berfungsi dengan baik di Opera. Mencoba text/csvtanpa keberuntungan.

Beberapa yang lain Tipe-MIME untuk CSV jika yang disarankan tidak berfungsi:

• teks / nilai dipisahkan koma
• teks / csv
• aplikasi / csv
• aplikasi / excel
• application / vnd.ms-excel
• application / vnd.msexcel
• teks / teks apa saja

Sumber: http://filext.com/file-extension/CSV

Ini tidak berfungsi untuk saya di bawah Safari 10:

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

Saya harus menulis ini sebagai gantinya:

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

Anda dapat mengetahui tipe konten yang benar untuk file apa pun hanya dengan melakukan hal berikut:

1) Pilih file yang tertarik,

2) Dan jalankan di konsol ini:

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

Anda juga dapat mengatur atribut "beberapa" untuk input Anda untuk memeriksa tipe konten untuk beberapa file sekaligus dan lakukan selanjutnya:

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

Terima atribut memiliki beberapa masalah dengan beberapa atribut dan tidak berfungsi dengan benar dalam kasus ini.

Saya telah memodifikasi solusi @yogi. Selain itu, ketika file dalam format yang salah saya mereset nilai elemen input.

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

Saya memiliki buildin verifikasi khusus, karena di jendela file terbuka pengguna masih dapat memilih opsi "Semua file ('*')", terlepas dari apakah saya secara eksplisit mengatur atribut accept di elemen input.

Sekarang Anda dapat menggunakan atribut validasi input html5 baru pattern=".+\.(xlsx|xls|csv)".