file-upload español - Entrada HTML="archivo" Aceptar el tipo de archivo de atributo(CSV)




qgis guia (9)

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.

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/


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.


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


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


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

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

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.


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

Otro problema de IE al usar <button /> :

Y mientras hablamos de IE, tiene un par de errores relacionados con el ancho de los botones. Misteriosamente agregará relleno adicional cuando intente agregar estilos, lo que significa que tendrá que agregar un pequeño truco para tener las cosas bajo control.





html csv file-upload input content-type