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


501

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/


sebagian besar browser tidak menghormati atribut accept karena dapat digunakan untuk membuat pengguna yang tidak memperhatikan mengirimkan file sensitif.
tletnes

9
@tletnes tidak benar, didukung oleh sebagian besar peramban utama
Dom

Anda juga dapat mencoba ini jika ($ .trim ($ ('# OriginalFileName'). Val ())! = "") {Var ext = $ ('# OriginalFileName'). Val (). Split ('.') .pop (). toLowerCase (); if ($ .inArray (ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) {$ ('# OriginalFileNameValid'). html ('Gunakan .doc , .docx, .pdf files '); }}
Nithin Paul

Jika ada pengguna Ubuntu lain yang bingung dengan hal ini, saya telah menemukan bahwa di Ubuntu, Firefox secara default menunjukkan "Semua File", tetapi menambahkan apa pun atribut "terima" Anda ke dropdown tipe file dalam dialog pemilihan file.
mltsy

Jawaban:


1248

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

3
Tampaknya Chrome mendukung atribut ini, tetapi Firefox masih mengerjakannya. Anda dapat memilih bug ini sehingga mereka akan menyelesaikannya lebih cepat: bugzilla.mozilla.org/show_bug.cgi?id=826176
Salvatorelab

3
@ Davidvidoutout atribut terima hanya akan memfilter jenis file. Anda harus menggunakan validasi file juga untuk mencegah pengguna memilih jenis file lainnya. Semoga itu bisa membantu!
Dom

1
<input type = "file" accept = ". csv" /> tidak berfungsi di Firefox. Apakah ada solusi lain untuk membuatnya berfungsi di Firefox.
Ganesa Vijayakumar

1
<input type="file" accept=".csv, text/csv" />bekerja untuk saya di firefox, chrome, dan opera di mac. hanya .csv tidak berfungsi di semua browser.
tmas

1
Bisakah Anda menambahkan contoh untuk file "xml"? Ini akan sangat membantu. Terima kasih sebelumnya.
ni8mr


38

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.


5
Solusi keren tapi saya tidak mengerti mengapa atribut seperti itu dianggap 'lama'. Ini adalah fitur pemilih file dasar pada hampir setiap OS, browser harus melakukan yang terbaik untuk membuatnya berfungsi dan itu akan membantu banyak pengguna ...
Christophe Roussy

1
Atribut accept tidak lama dan didukung di browser utama kecuali untuk IE / Edge: caniuse.com/#feat=input-file-accept . Harap ulangi jawaban Anda karena salah arah.
thomaux

2
Aspek terpenting dari acceptatribut adalah petunjuk yang disediakannya untuk dialog file-terbuka. Pengguna harus disajikan dengan file yang cocok secara default, mungkin dengan opsi untuk memilih jenis lain jika mereka mau - ini adalah bagaimana sebagian besar browser modern berperilaku sekarang.
Coderer

13

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


1
Hai Dom! Saya ingin minta maaf karena jawaban Anda (ditandai sebagai kanan) tidak apa-apa dan saya tidak punya banyak perhatian sebelumnya karena saya menguji situs di Opera saja. Setelah menguji di browser lain, saya melihat bahwa jawaban Anda lebih lengkap. Tetapi itu tidak bekerja di semua browser. Firefox 17 tidak mendukung accept attr how a filter di File Dialog ( bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ), jadi properti ini menegangkan bagi saya. Saya tetap akan menggunakan validasi file javascript, tetapi menggunakan teks / csv di accept attr karena itu adalah default IANA iana.org/assignments/media-types
jaysponsored

11

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

Hai ,,, itu bekerja dengan baik di safari saya juga. Tetapi bagaimana jika kita ingin menerima dokumen excel? apakah kamu punya petunjuk? @trojan
Gustav

Periksa jawaban Uang Besar. TLDR; <input type = "file" ID = "fileSelect" accept = ". xlsx, .xls, .csv" />
Sk. Irfan

4

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.


1

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.


0

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


10
Menurut MDN , This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.Mengenai masukan file, mereka melanjutkan dengan mengatakanfile: 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
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.