Saya punya file upload objek pada halaman saya:
<input type="file" ID="fileSelect" />
berikut ini file excel pada desktop saya:
- file1.xlsx
- file1.xls
- file.csv
Saya ingin meng-upload file ke HANYA show .xlsx
, .xls
, & `.csv file.
Menggunakan menerima
atribut, aku menemukan ini konten-jenis mengurus .xlsx
& .xls
ekstensi...
menerima
= application/vnd.openxmlformats-officedocument.spreadsheetml.lembar (.XLSX)
menerima
= application/vnd.ms-excel (.XLS)
Namun, saya tidak dapat menemukan konten yang benar-type untuk Excel CSV file! Ada saran?
CONTOH: <
>Nah ini memalukan... saya menemukan solusi yang saya cari dan tidak't menjadi lebih sederhana. Saya menggunakan kode berikut untuk mendapatkan hasil yang diinginkan. Semoga ini bisa membantu seseorang di masa depan. Terima kasih semua orang untuk membantu anda.
<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
Untuk CSV file (.csv), menggunakan:
<input type="file" accept=".csv" />
Untuk File Excel 97-2003 (.xls), menggunakan:
<input type="file" accept="application/vnd.ms-excel" />
Untuk File Excel 2007+ (.xlsx), menggunakan:
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
Untuk File Teks (.txt) menggunakan:
<input type="file" accept="text/plain" />
Untuk File Gambar (.png/.jpg/dll), gunakan:
<input type="file" accept="image/*" />
Untuk File HTML (.htm,.html), menggunakan:
<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 PDF File, gunakan:
<input type="file" accept=".pdf" />
DEMO:
NOTE:
Jika anda mencoba untuk menampilkan Excel CSV file (.csv
), jangan TIDAK gunakan:
text/csv
application/csv
text/koma-dipisahkan-nilai
(bekerja di Opera hanya).Jika anda mencoba untuk menampilkan khusus tipe file (misalnya, WAV
atau PDF
), maka hal ini akan hampir selalu bekerja...
<input type="file" accept=".FILETYPE" />
Dom atribut ini sangat tua dan tidak diterima di browser modern sejauh yang saya tahu, Tapi di sini adalah sebuah 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'll bantuan anda tentu saja anda dapat mengubah script ini sesuai dengan kebutuhan anda.
Saya telah menggunakan text/koma-dipisahkan-nilai
untuk CSV mime-type dalam menerima atribut dan bekerja dengan baik di Opera. Mencoba text/csv
tanpa keberuntungan.
Beberapa orang lain MIME-Type untuk CSV jika disarankan tidak bekerja:
Anda dapat mengetahui konten yang benar-jenis untuk setiap file hanya dengan melakukan hal berikut:
Pilih file tertarik,
Dan berjalan di konsol ini:
console.log($('.file-input')[0].files[0].type);
Anda juga dapat mengatur atribut "beberapa" untuk masukan anda untuk memeriksa content-type 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);
}
Atribut menerima memiliki beberapa masalah dengan beberapa atribut dan doesn't bekerja dengan benar dalam kasus ini.
Saya telah dimodifikasi solusi dari @yogi. Selain itu adalah bahwa ketika file dari format yang salah saya reset elemen input nilai.
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 kebiasaan verifikasi buildin, karena dalam file yang terbuka jendela pengguna masih dapat memilih opsi "Semua file ('*')", terlepas jika aku secara eksplisit menetapkan menerima atribut dalam elemen input.