web-dev-qa-db-fra.com

HTML Input = "fichier" Accepter le type de fichier d'attribut (CSV)

J'ai un objet de téléchargement de fichier sur ma page:

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

avec les fichiers Excel suivants sur mon bureau:

  1. fichier1.xlsx
  2. fichier1.xls
  3. fichier.csv

Je veux que le fichier soit téléchargé sur SEULEMENT montre .xlsx, .xls, & .csv fichiers.

En utilisant l'attribut accept, j'ai trouvé que ces types de contenu prenaient en charge les extensions .xlsx & .xls ...

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

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

Cependant, je ne trouve pas le type de contenu correct pour un fichier Excel CSV! Aucune suggestion?

EXEMPLE: http://jsfiddle.net/LzLcZ/

htmlcsvfile-uploadinputcontent-type
434
Dom

Eh bien, c’est embarrassant ... J'ai trouvé la solution que je cherchais et cela ne pourrait être plus simple. J'ai utilisé le code suivant pour obtenir le résultat souhaité. J'espère que cela aidera quelqu'un dans le futur. Merci à tous pour votre aide.

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

Types d'acceptation valides:

Pour CSV fichiers (.csv), utilisez:

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

Pour Excel Files 97-2003 (.xls), utilisez:

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

Pour Excel Files 2007 + (.xlsx), utilisez:

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

Pour Fichiers texte (.txt), utilisez:

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

Pour Fichiers d'image (.png/.jpg/etc), utilisez:

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

Pour fichiers HTML (.htm, .html), utilisez:

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

Pour Fichiers vidéo (.avi, .mpg, .mpeg, .mp4), utilisez:

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

Pour Fichiers audio (.mp3, .wav, etc.), utilisez:

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

Pour fichiers PDF , utilisez:

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

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

NOTE:

Si vous essayez d’afficher des fichiers CSV Excel (.csv), faites PAS utilisation:

  • text/csv
  • application/csv
  • text/comma-separated-values ( ne fonctionne que dans Opera seulement ).

Si vous essayez d'afficher un type de fichier particulier (par exemple, un WAV ou PDF), cela fonctionnera presque toujours ...

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

Ces jours, vous pouvez simplement utiliser l'extension de fichier

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

Dom cet attribut est très ancien et n'est pas accepté par les navigateurs modernes à ma connaissance, mais voici une alternative, essayez ceci

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

Je suppose que cela vous aidera bien entendu à modifier ce script en fonction de vos besoins.

38
yogi

J'ai utilisé text/comma-separated-values pour le type mime CSV dans l'attribut accept et cela fonctionne très bien dans Opera. Essayé text/csv sans chance.

Quelques autres types MIME pour CSV si les suggestions ne fonctionnent pas:

  • texte/valeurs séparées par des virgules
  • texte/csv
  • application/csv
  • application/Excel
  • application/vnd.ms-Excel
  • application/vnd.msexcel
  • text/anytext

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

11
jaysponsored

Cela n'a pas fonctionné pour moi sous Safari 10:

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

J'ai dû écrire ceci à la place:

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

Vous pouvez connaître le type de contenu correct pour tout fichier en procédant simplement comme suit:

1) Sélectionnez le fichier intéressé,

2) Et lancez en console ceci:

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

Vous pouvez également définir l'attribut "multiple" pour votre entrée afin de vérifier le type de contenu pour plusieurs fichiers à la fois, puis procédez comme suit:

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

L'attribut accept a des problèmes avec l'attribut multiple et ne fonctionne pas correctement dans ce cas.

4
opiumind

J'ai modifié la solution de @yogi. En plus, lorsque le fichier a un format incorrect, je réinitialise la valeur de l’élément d’entrée.

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

J'ai une construction de vérification personnalisée, car dans la fenêtre de fichier ouvert, l'utilisateur peut toujours choisir les options "Tous les fichiers ('*')", que je définisse explicitement l'attribut accept dans l'élément input.

1
RenatoIvancic

Vous pouvez maintenant utiliser le nouvel attribut de validation d'entrée html5 pattern=".+\.(xlsx|xls|csv)".

0
iiic