584 votos

HTML Input="file" Aceptar el atributo Tipo de archivo (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. archivo1.xlsx
  2. archivo1.xls
  3. archivo.csv

Quiero que la carga de archivos sea SOLO mostrar .xlsx , .xls , & .csv archivos.

Utilizando el accept me encontré con que estos tipos de contenido se encargaban de .xlsx & .xls extensiones...

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

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

Sin embargo, no encuentro el tipo de contenido correcto para un archivo CSV de Excel. ¿Alguna sugerencia?

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

0 votos

La mayoría de los navegadores no respetan el atributo "accept", ya que puede ser utilizado para encubrir a los usuarios que no prestan atención para transmitir archivos sensibles.

11 votos

@tletnes no es cierto, es compatible con la mayoría de los principales navegadores

0 votos

También puedes probar esto si ($.trim($('#NombreArchivoOriginal').val()) != "") { var ext = $('#NombreArchivoOriginal').val().split('.').pop(). toLowerCase(); if ($.inArray(ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) { $('#NombreDeArchivoOriginalValido').html('Usar archivos .doc,.docx,.pdf'); } }

1467voto

Dom Puntos 7921

Bueno esto es vergonzoso... He encontrado la solución que buscaba y no puede ser más sencilla. Usé el siguiente código para obtener el resultado deseado. Espero que esto ayude a alguien en el futuro. Gracias a todos por vuestra 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 CSV (.csv), utilice:

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

Para Archivos de Excel 97-2003 (.xls), utilice:

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

Para Archivos de Excel 2007+ (.xlsx), utilice:

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

Para Archivos de texto (.txt):

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

Para Archivos de imagen (.png/.jpg/etc), utilice:

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

Para Archivos HTML (.htm,.html), utilice:

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

Para Archivos de vídeo (.avi, .mpg, .mpeg, .mp4), utilice:

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

Para Archivos de audio (.mp3, .wav, etc), utilice:

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

Para Archivos PDF usar:

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

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


NOTA:

Si está intentando visualizar archivos CSV de Excel ( .csv ), haga NO uso:

  • text/csv
  • application/csv
  • text/comma-separated-values ( sólo funciona en Opera ).

Si está tratando de mostrar un tipo de archivo particular (por ejemplo, un WAV o PDF ), entonces esto casi siempre funcionará...

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

3 votos

Parece que Chrome soporta este atributo, pero Firefox aún está trabajando en ello. Puedes votar este fallo para que lo solucionen más rápido: bugzilla.mozilla.org/show_bug.cgi?id=826176

0 votos

Hey Dom (y todo el mundo) un poco de una pregunta puntillosa, pero he utilizado el atributo de aceptar (para csv, xls, y xlsx archivos) y funciona muy bien, excepto que también permite al usuario - al menos en mi máquina - para seleccionar los archivos de icono, así, y luego muestra un mensaje de error que dice "FILE NAME: Fallo catastrófico". Simplemente le permitirá elegir otro archivo después de que, por lo que no es tan catastrófico, sólo se preguntaba si alguien tiene una idea de por qué esto podría suceder?

3 votos

@DavidRouten el atributo accept sólo filtraría los tipos de archivo. Tendrías que usar la validación de archivos también para evitar que los usuarios seleccionen otros tipos de archivos. Espero que esto ayude.

40voto

yogi Puntos 6950

Dom este atributo es muy antiguo y no se acepta en los navegadores modernos por lo que sé, Pero aquí es una alternativa a ella, 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 te ayudará, por supuesto, puedes cambiar este script según tus necesidades.

5 votos

Una buena solución, pero no entiendo por qué un atributo así se considera "antiguo". Esta es una característica básica del selector de archivos en casi todos los sistemas operativos, los navegadores deberían hacer todo lo posible para que funcione y ayudaría a muchos usuarios...

1 votos

El atributo accept no es antiguo y es compatible con los principales navegadores, excepto IE/Edge: caniuse.com/#feat=fichero-de-entrada-aceptado . Por favor, replantee su respuesta ya que es errónea.

2 votos

El aspecto más importante de la accept es la pista que proporciona al diálogo de apertura de archivos. El usuario debería recibir por defecto los archivos correspondientes, presumiblemente con una opción para seleccionar otros tipos si lo desea -- así es como se comportan ahora la mayoría de los navegadores modernos.

16voto

jaysponsored Puntos 433

He utilizado text/comma-separated-values para CSV mime-type en el atributo accept y funciona bien en Opera. He probado con text/csv sin 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
  • aplicación/vnd.ms-excel
  • aplicación/vnd.msexcel
  • texto/cualquier texto

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

1 votos

¡Hola Dom! Quiero pedirte disculpas porque tu respuesta (marcada como correcta) está bien y antes no le presté mucha atención porque estaba probando el sitio sólo en Opera. Después de probar en otros navegadores, veo que tu respuesta es más completa. Pero no funciona en todos los navegadores. Firefox 17 no admite aceptar attr cómo un filtro en el diálogo de archivo ( bugzilla.mozilla.org/show_bug.cgi?id=83749#c14 ), por lo que esta propiedad está en suspenso para mí. Usaré la validación de archivos en javascript de todos modos, pero usaré text/csv en accept attr porque es el valor por defecto de IANA iana.org/tareas/tipos-de-medios-de-comunicación

4voto

opiumind Puntos 21

Puede conocer el tipo de contenido correcto para cualquier archivo con sólo hacer lo siguiente:

1) Seleccione el archivo interesado,

2) Y ejecutar en consola esto:

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

También puede establecer el atributo "múltiple" para su entrada para comprobar 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);
}

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

0 votos

Haciendo esto y seleccionando un archivo .csv obtengo type: "text/csv" pero usando accept="text/csv" en una entrada no filtra los archivos correctamente (probado en Brave / Chromium). Usando accept=".csv" sin embargo, funciona. Para ir a lo seguro, si no quieres probar en todos los navegadores comunes, yo usaría tanto el tipo mime como la extensión del archivo así accept="text/csv,.csv" .

-1voto

iiic Puntos 318

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

11 votos

Según MDN , This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. En cuanto a la entrada de archivos, continúan diciendo file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X