Entrada HTML = "archivo" Aceptar tipo de archivo de atributo (CSV)

Tengo un objeto de carga de archivos en mi página:

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

con los siguientes archivos de Excel en mi escritorio:

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

Quiero que la carga de archivos de sólo mostrar .xlsx, .xls, y .csvarchivos.

Usando el acceptatributo, encontré que estos tipos de contenido se ocuparon de .xlsx& .xlsextensiones ...

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

accept= aplicación / vnd.ms-excel (.XLS)

Sin embargo, ¡no puedo encontrar el tipo de contenido correcto para un archivo CSV de Excel! ¿Alguna sugerencia?

EJEMPLO: http://jsfiddle.net/LzLcZ/

Bueno, esto es vergonzoso ... Encontré la solución que estaba buscando y no podría ser más simple. Usé el siguiente código para obtener el resultado deseado. Espero que esto ayude a alguien en el futuro. Gracias a todos por su ayuda.

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

Tipos de aceptación válidos:

Para archivos CSV (.csv), use:

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

Para los archivos de Excel 97-2003 (.xls), use:

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

Para archivos Excel 2007+ (.xlsx), use:

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

Para archivos de texto (.txt) use:

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

Para archivos de imagen (.png / .jpg / etc), use:

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

Para archivos HTML (.htm, .html), use:

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

Para archivos de video (.avi, .mpg, .mpeg, .mp4), use:

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

Para archivos de audio (.mp3, .wav, etc.), use:

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

Para archivos PDF , use:

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

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

NOTA:

Si está intentando mostrar archivos CSV de Excel ( .csv), NO use:

• text/csv
• application/csv
• text/comma-separated-values( funciona solo en Opera ).

Si está intentando mostrar un tipo de archivo en particular (por ejemplo, a WAVo PDF), esto casi siempre funcionará ...

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

En estos días solo puedes usar la extensión de archivo

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

Dom, este atributo es muy antiguo y no se acepta en los navegadores modernos, que yo sepa, pero aquí hay una alternativa, intente esto

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

Supongo que te ayudará, por supuesto, puedes cambiar este script de acuerdo a tus necesidades.

Lo he usado text/comma-separated-valuespara CSV mime-type en el atributo accept y funciona bien en Opera. Intenté text/csvsin suerte.

Algunos otros tipos MIME para CSV si los sugeridos no funcionan:

• texto / valores separados por comas
• texto / csv
• aplicación / csv
• aplicación / excel
• application / vnd.ms-excel
• application / vnd.msexcel
• texto / cualquier texto

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

Esto no funcionó para mí en Safari 10:

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

Tuve que escribir esto en su lugar:

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

Puede conocer el tipo de contenido correcto para cualquier archivo simplemente haciendo lo siguiente:

1) Seleccione el archivo interesado,

2) Y ejecuta en la consola esto:

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

También puede establecer el atributo "múltiple" para su entrada para verificar el tipo de contenido de varios archivos a la vez y hacer lo siguiente:

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

La aceptación de atributos tiene algunos problemas con atributos múltiples y no funciona correctamente en este caso.

He modificado la solución de @yogi. La adición es que cuando el archivo tiene un formato incorrecto, restablezco el valor del elemento de entrada.

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

Tengo un buildin de verificación personalizado, porque en la ventana de archivo abierto el usuario aún puede elegir las opciones "Todos los archivos ('*')", independientemente de si configuro explícitamente el atributo accept en el elemento de entrada.

Ahora puede usar el nuevo atributo de validación de entrada html5 pattern=".+\.(xlsx|xls|csv)".