html - guia - qgis español

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

Question

Esperaba que alguien me ayudara.

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. archivo.csv

Quiero que la carga del archivo SÓLO muestre archivos .xlsx , .xls y .csv .

Usando el atributo de accept , encontré que estos tipos de contenido se encargaban de las extensiones .xlsx y .xls ...

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

accept = application / 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/

Answer 1

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

Answer 2

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 los archivos de 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" /> 

MANIFESTACIÓN:
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, un WAV o PDF ), esto casi siempre funcionará ...

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

Answer 3

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 según tus necesidades.

Answer 4

Esto no me funcionó bajo Safari 10:

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

Tuve que escribir esto en su lugar:

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

Answer 5

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

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

Answer 6

He modificado la solución de @yogi. La adición es que cuando el archivo tiene un formato incorrecto, reinicio 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 componente de verificación personalizado, porque en la ventana de archivo abierto el usuario todavía puede elegir las opciones "Todos los archivos (''*'')", independientemente de si configuro explícitamente el atributo de aceptación en el elemento de entrada.

Answer 7

He usado text/comma-separated-values por comas para CSV mime-type en el atributo de aceptación y funciona bien en Opera. Intenté text/csv sin suerte.

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

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

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

Answer 8

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

1) Seleccione el archivo interesado,

2) Y ejecutar en consola esto:

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

También puede configurar el atributo "múltiple" para que su entrada compruebe el tipo de contenido de 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);
}

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

Answer 9

el uso de 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;
    }