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

501

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/

Dom
fuente
la mayoría de los navegadores no respetan el atributo accept, ya que puede usarse para incitar a los usuarios que no prestan atención a transmitir archivos confidenciales.
tletnes
99
@tletnes no es cierto, es compatible con la mayoría de los principales navegadores
Dom
También puede intentar esto si ($ .trim ($ ('# OriginalFileName'). Val ())! = "") {Var ext = $ ('# OriginalFileName'). Val (). Split ('.') .pop (). toLowerCase (); if ($ .inArray (ext, ['doc', 'docx', 'pdf', 'xlsx', 'xls']) == -1) {$ ('# OriginalFileNameValid'). html ('Use .doc , archivos .docx, .pdf '); }}
Nithin Paul
En caso de que otros usuarios de Ubuntu se confundan con esto, he descubierto que en Ubuntu, Firefox por defecto muestra "Todos los archivos", pero agrega lo que sea su atributo "aceptar" al menú desplegable de tipo de archivo en el cuadro de diálogo de selección de archivos.
mltsy

Respuestas:

1248

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" />
Dom
fuente
3
Parece que Chrome admite este atributo, pero Firefox todavía está trabajando en ello. Puede votar este error para que lo resuelvan más rápido: bugzilla.mozilla.org/show_bug.cgi?id=826176
Salvatorelab
3
@DavidRouten el atributo accept solo filtraría los tipos de archivos. Tendría que usar la validación de archivos también para evitar que los usuarios seleccionen otros tipos de archivos. ¡Espero que ayude!
Dom
1
<input type = "file" accept = ". csv" /> no funciona en Firefox. ¿Hay alguna otra solución para hacer que funcione esto en Firefox?
Ganesa Vijayakumar
1
<input type="file" accept=".csv, text/csv" />funcionó para mí en Firefox, Chrome y Opera en Mac. solo .csv no funcionó en todos los navegadores.
tmas
1
¿Puedes agregar un ejemplo para el archivo "xml"? Será de gran ayuda. Gracias por adelantado.
ni8mr
38

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.

yogui
fuente
55
Una solución interesante, pero no entiendo por qué ese atributo se considera 'viejo'. Esta es una característica básica del selector de archivos en casi todos los sistemas operativos, los navegadores deben hacer todo lo posible para que funcione y ayudaría a muchos usuarios ...
Christophe Roussy
1
El atributo accept no es antiguo y es compatible con los principales navegadores, excepto IE / Edge: caniuse.com/#feat=input-file-accept . Por favor, reformule su respuesta ya que es errónea.
thomaux
2
El aspecto más importante del acceptatributo es la sugerencia que proporciona al diálogo de archivo abierto. Se le debe presentar al usuario archivos coincidentes de manera predeterminada, presumiblemente con una opción para seleccionar otros tipos si así lo desea; así es como se comportan la mayoría de los navegadores modernos ahora.
Coderer
13

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

Jay patrocinado
fuente
1
Hola dom Quiero pedir disculpas porque su respuesta (marcada como correcta) está bien y no he prestado mucha atención antes porque estaba probando el sitio solo en Opera. Después de probar en otros navegadores, veo que su 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 es suspenso para mí. Usaré la validación de archivos javascript de todos modos, pero usar text / csv en accept attr porque es el valor predeterminado de IANA iana.org/assignments/media-types
patrocinado por jay el
11

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" />
troyano
fuente
Hii ,,, funciona bien en mi safari también. Pero, ¿cómo si queremos aceptar documentos de Excel? Tienes alguna pista ? @trojan
gustav
Verifique la respuesta de Big Money. TLDR; <input type = "file" ID = "fileSelect" accept = ". xlsx, .xls, .csv" />
Sk. Irfan
4

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.

Olga Lisovskaya
fuente
1

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.

RenatoIvancic
fuente
0

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

iiic
fuente
10
Según MDN , con This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored.respecto a la entrada del archivo, continúan diciendofile: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
Dom