HTML Input=“fichier” Accepter l'Attribut Type de Fichier (CSV)
J'ai un objet de téléchargement de fichier sur ma page:
<input type="file" ID="fileSelect" />
suivantes avec les fichiers excel sur mon bureau:
- file1.xlsx
- file1.xls
- fichier.csv
Je veux télécharger un fichier à SEULEMENT montrer .xlsx
, .xls
, & .csv
fichiers.
À l'aide de la accept
attribut, j'ai trouvé ces types de contenu pris soin de .xlsx
& .xls
extensions...
accept
= application/vnd.openxmlformats-officedocument.spreadsheetml.feuille de (.XLSX)
accept
= application/vnd.ms-excel (.XLS)
Cependant, je ne trouve pas le bon type de contenu pour un Excel en fichier CSV! Toutes les suggestions?
EXEMPLE: http://jsfiddle.net/LzLcZ/
- la plupart des navigateurs ne respectent pas les accepter attribut car il peut être utilisé pour encurage les utilisateurs qui ne font pas attention à transmettre des fichiers sensibles.
- pas vrai, il est pris en charge par la plupart des principaux navigateurs
- Vous pouvez également essayer cette if ($.trim($('#OriginalFileName').val()) != "") { var ext = $('#OriginalFileName').val().split('.').pop().toLowerCase(); if ($.inArray(ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) { $('#OriginalFileNameValid').html('Utilisation .doc,.docx,.les fichiers pdf'); } }
- Dans le cas où d'autres utilisateurs d'Ubuntu sont confus par cela, j'ai constaté que dans Ubuntu, Firefox par défaut à l'affichage de "Tous les Fichiers", mais ajoute que, quel que soit votre "accepter" est l'attribut de la liste déroulante type de fichier dans le dialogue de sélection de fichier.
Vous devez vous connecter pour publier un commentaire.
Bien, c'est gênant... j'ai trouvé la solution que je cherchais et il ne pouvait pas être plus simple. J'ai utilisé le code suivant pour obtenir le résultat souhaité. Espérons que cela aide quelqu'un dans l'avenir. Merci à tous pour votre aide.
Valide Accepter Types:
Pour CSV fichiers (.csv), utilisation:
Pour Fichiers Excel 97-2003 (.xls), utilisation:
Pour Fichiers Excel 2007+ (.xlsx), utilisation:
Pour Fichiers Texte (.txt) utilisation:
Pour Fichiers Image (.png/.jpg/etc), utilisation:
Pour Fichiers HTML (.htm,.html), utilisation:
Pour Fichiers Vidéo (.avi, .mpg, .mpeg, .mp4), utilisation:
Pour Fichiers Audio (.mp3, .wav, etc), l'utilisation:
Pour Fichiers PDF, utilisation:
DÉMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/
REMARQUE:
Si vous tentez d'afficher Excel fichiers CSV (
.csv
), ne PAS utilisation:text/csv
application/csv
text/comma-separated-values
(travaille dans l'unique Opéra de).Si vous tentez d'afficher une type de fichier particulier (par exemple, un
WAV
ouPDF
), puis ce sera presque toujours le travail...<input type="file" accept=".csv, text/csv" />
a fonctionné pour moi sous firefox, chrome et opera sur mac. seulement .csv ne fonctionne pas dans tous les navigateurs.accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
Ces jours-ci, vous pouvez simplement utiliser l'extension de fichier
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel
) n'apparaît toujours pas de travail sur le Bord 41.16299.820.0 stackoverflow.com/questions/31875617/... wpdev.uservoice.com/forums/257854-microsoft-edge-developer/...Dom cet attribut est très ancienne et n'est pas acceptée dans les navigateurs modernes pour autant que je sais, Mais ici, c'est une alternative, Essayez cette
Je suppose que ça va vous aider bien sûr, vous pouvez modifier ce script en fonction de vos besoins.
accept
attribut est l'indice qu'il fournit à l'ouvrir-fichier boîte de dialogue. L'utilisateur doit être présenté avec l'appariement des fichiers par défaut, sans doute avec une option pour sélectionner d'autres types, si elles le souhaitent-voilà comment la plupart des navigateurs modernes se comportent maintenant.J'ai utilisé
text/comma-separated-values
pour CSV mime-type à accepter attribut et il fonctionne très bien dans l'Opéra. Essayétext/csv
sans chance.Certains autres Types MIME pour CSV si les suggestions ne fonctionnent pas:
Source: http://filext.com/file-extension/CSV
.csv
comme<input type="file" accept=".csv" />
Cela n'a pas fonctionné pour moi sous Safari 10:
J'ai eu à écrire ceci à la place:
Vous pouvez connaître le bon type de contenu de n'importe quel fichier simplement en procédant de la manière suivante:
1) Sélectionnez intéressés fichier,
2) Et l'exécuter dans la console:
Vous pouvez également définir l'attribut "multiple" pour votre entrée pour vérifier le type de contenu de plusieurs fichiers en même temps et ne suivant:
Attribut accepter a quelques problèmes avec l'attribut multiple et ne fonctionne pas correctement dans ce cas.
J'ai modifié la solution de @yogi. Le plus est que lorsque le fichier est de format incorrect-je réinitialiser l'entrée de la valeur de l'élément.
J'ai coutume de vérification de bâtiment, parce que dans la fenêtre ouvrir le fichier, l'utilisateur peut toujours choisir l'option "Tous les fichiers ('*')", peu importe si je définir explicitement l'accepter attribut dans l'élément d'entrée.
Vous pouvez maintenant utiliser le nouveau html5 validation des entrées de l'attribut
pattern=".+\.(xlsx|xls|csv)"
.This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.
Concernant le fichier d'entrée, ils vont direfile: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
en utilisant les regex serait plus rapide