HTML Input = "archivo" Aceptar Atributo Tipo de archivo (CSV)

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

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

Dom este atributo es muy antiguo y no es aceptado en los navegadores modernos que yo sepa, Pero aquí hay una alternativa a él, Pruebe 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 le ayudará, por supuesto, puede cambiar este script de acuerdo a sus necesidades.

He usado text/comma-separated-values para el tipo mime CSV en el atributo accept y funciona bien en Opera. Intentado text/csv sin suerte.

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

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

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

Esto no funcionó para mí bajo Safari 10:

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

Tuve que escribir esto en su lugar:

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

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

1) Seleccione el archivo interesado,

2) Y ejecutar en la consola esto:

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

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

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

El atributo accept tiene algunos problemas con múltiples atributos y no funciona correctamente en este caso.

He modificado la solución de @yogi. La adición es que cuando el archivo es de 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 una compilación de verificación personalizada, porque en la ventana abrir archivo el usuario todavía puede elegir las opciones "Todos los archivos ('*')", independientemente de si establezco 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)".

Usar expresiones regulares sería más rápido

    function checkIsExcel(file) {
        if ((!/.*\.xlsx$/.test(file.name)) && (!/.*\.xls$/.test(file.name)) && (!/.*\.csv$/.test(file.name))) {
            return false;
        }
        return true;
    }