HTML Girişi = “dosya” Öznitelik Dosya Türünü Kabul Et (CSV)

Sayfamda bir dosya yükleme nesnesi var:

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

masaüstümde aşağıdaki excel dosyaları ile:

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

Dosya yüklemeyi istiyorum SADECE göstermek.xlsx,.xls&.csvdosyaları.

Kullanmak accept özelliği bu içerik türlerinin .xlsx& .xlsuzantıları ile ilgilendiğini gördüm ...

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

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

Ancak, bir Excel CSV dosyası için doğru içerik türünü bulamıyorum! Herhangi bir öneri?

ÖRNEK: http://jsfiddle.net/LzLcZ/

Bu utanç verici ... Aradığım çözümü buldum ve daha kolay olamazdı. İstenilen sonucu almak için aşağıdaki kodu kullandım. Umarım bu gelecekte birine yardımcı olur. Yardımlarınız için herkese teşekkürler.

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

Geçerli Kabul Türleri:

For CSV dosyaları (CSV), kullanım:

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

İçin Excel Files 97-2003 (.xls), kullanım:

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

İçin Excel dosyaları 2007+ (.xlsx), kullanım:

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

İçin Metin Dosyaları (.txt) kullanımı:

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

İçin Resim Dosyaları (.png / .jpg / vs), kullanım:

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

For HTML dosyaları (.htm, .html), kullanım:

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

İçin Video Dosyaları (.avi, .mpg, .mpeg, .mp4), kullanım:

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

İçin Ses Dosyaları (.mp3, .wav, vb), kullanım:

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

İçin PDF Dosyası , kullanım:

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

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

NOT:

Excel CSV dosyalarını ( .csv) görüntülemeye çalışıyorsanız , KULLANMAYIN :

• text/csv
• application/csv
• text/comma-separated-values( yalnızca Opera'da çalışır ).

Bir görüntülemek çalışıyorsanız özellikle dosya türünü (örneğin, bir WAVya da PDF), o zaman bu neredeyse daima işi ...

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

Bu günlerde sadece dosya uzantısını kullanabilirsiniz

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

Dom bu özellik çok eski ve bildiğim kadarıyla modern tarayıcılarda kabul edilmiyor, Ama burada bir alternatif var, Bunu dene

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

Sanırım size yardımcı olacak elbette bu betiği ihtiyaçlarınıza göre değiştirebilirsiniz.

Kabul text/comma-separated-valuesözniteliğinde CSV mime tipi için kullandım ve Opera'da iyi çalışıyor. Şanssız denedim text/csv.

Önerilen çalışmazsa CSV için bazı MIME Türleri:

• metin / virgülle ayrılmış değer
• metin / csv
• Uygulama / CSV
• Uygulama / Excel
• Uygulama / vnd.ms-Excel
• Uygulama / vnd.msexcel
• metin / anytext

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

Safari 10 altında bu benim için işe yaramadı:

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

Bunun yerine yazmak zorunda kaldım:

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

Yalnızca aşağıdakileri yaparak herhangi bir dosya için doğru içerik türünü öğrenebilirsiniz:

1) İlgilenilen dosyayı seçin,

2) Ve bu konsolda çalıştırın:

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

Ayrıca, bir kerede birden fazla dosya için içerik türünü kontrol etmek ve daha sonra yapmak üzere girişinizin "çoklu" özelliğini ayarlayabilirsiniz.

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

Öznitelik kabulünün birden çok öznitelikle ilgili bazı sorunları vardır ve bu durumda düzgün çalışmaz.

@Yogi'nin çözümünü değiştirdim. Buna ek olarak, dosya yanlış biçime sahip olduğunda girdi öğesi değerini sıfırlarım.

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

Ben özel doğrulama buildin var, çünkü açık dosya penceresinde kullanıcı hala giriş öğesinde kabul özniteliğini açıkça ayarlamak, ne olursa olsun "Tüm dosyalar ('*')" seçenekleri seçebilirsiniz.

Artık yeni html5 giriş doğrulama özelliğini kullanabilirsiniz pattern=".+\.(xlsx|xls|csv)".