html - only - ¿Limitar el formato de archivo cuando se usa<input type=“file”>?

input type file value

Question

Me gustaría restringir el tipo de archivo que se puede elegir desde el selector de archivos nativo del sistema operativo cuando el usuario hace clic en el botón Examinar en el elemento <input type="file"> en HTML. Tengo la sensación de que es imposible, pero me gustaría saber si hay una solución. Me gustaría mantener únicamente a HTML y JavaScript; no flash por favor.

Answer 1

Como se mencionó en las respuestas anteriores, no podemos restringir al usuario para seleccionar archivos solo para formatos de archivo dados. Pero es realmente útil usar la etiqueta de aceptar en el atributo de archivo en html.

En cuanto a la validación, tenemos que hacerlo en el lado del servidor. También podemos hacerlo en el lado del cliente en js, pero no es una solución infalible. Debemos validar en el lado del servidor.

Para estos requisitos, realmente prefiero el framework de desarrollo de aplicaciones web struts2 Java. Con su función incorporada de carga de archivos, cargar archivos en aplicaciones web basadas en struts2 es muy sencillo. Solo mencione los formatos de archivo que nos gustaría aceptar en nuestra aplicación y todo el resto está a cargo del núcleo del propio marco. Puedes comprobarlo en el sitio oficial de struts.

Answer 2

Estrictamente hablando, la respuesta es no . El desarrollador no puede impedir que el usuario elija archivos de cualquier tipo o extensión en el cuadro de diálogo de selección de archivos del SO nativo.

Pero aún así, el atributo de accept de <input type = "file"> puede ayudar a proporcionar un filtro en el cuadro de diálogo de selección de archivos del sistema operativo. Por ejemplo,

<!-- (IE 10+, Edge, Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

debería proporcionar una manera de filtrar archivos que no sean .xls o .xlsx. Aunque la página de MDN para input elemento de input siempre decía que es compatible con esto, para mi sorpresa, esto no me funcionó en Firefox hasta la versión 42. Esto funciona en IE 10+, Edge y Chrome.

Por lo tanto, para admitir Firefox con más de 42 años junto con IE 10+, Edge, Chrome y Opera, creo que es mejor usar una lista de tipos MIME separados por comas:

<!-- (IE 10+, Edge, Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

[Comportamiento de borde : el menú desplegable de filtro de tipo de archivo muestra los tipos de archivo mencionados aquí, pero no es el predeterminado en el menú desplegable. El filtro predeterminado es All files (*) .]

También puedes usar asteriscos en los tipos MIME. Por ejemplo:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

W3C recommends autores especificar tanto los tipos MIME como las extensiones correspondientes en el atributo de accept . Entonces, el mejor enfoque es:

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge, Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSFiddle de lo mismo: here .

Referencia: Lista de tipos MIME

IMPORTANTE: el uso de aceptar atributo solo proporciona una forma de filtrar archivos de tipos que no son de interés. Los navegadores aún permiten a los usuarios elegir archivos de cualquier tipo. Se deben realizar verificaciones adicionales (del lado del cliente) (usando JavaScript, una forma sería this ), y definitivamente los tipos de archivos DEBEN ser verificados en el servidor , usando una combinación de tipo MIME usando tanto la extensión de archivo como su firma binaria ( ASP.NET , PHP , Ruby , Java ). Es posible que también desee consultar these tables para los tipos de archivos y sus números mágicos , para realizar una verificación más robusta del lado del servidor.

Aquí hay three good reads sobre archivos subidos y seguridad.

EDITAR: la verificación del tipo de archivo mediante su firma binaria también se puede realizar en el lado del cliente mediante JavaScript (en lugar de solo mirar la extensión) mediante la API de archivos HTML5, pero aún así, el archivo debe verificarse en el servidor, ya que el usuario aún podrá cargar archivos haciendo una solicitud HTTP personalizada.

Answer 3

Existe el atributo de aceptación para la etiqueta de entrada. Sin embargo, no es confiable de ninguna manera. Lo más probable es que los navegadores lo traten como una "sugerencia", lo que significa que, dependiendo del administrador de archivos, el usuario tendrá una preselección que solo muestra los tipos deseados. Todavía pueden elegir "todos los archivos" y cargar cualquier archivo que deseen.

ejemplo:

<form>
  <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

Lea más en la especificación html5

Tenga en cuenta que solo se debe utilizar como "ayuda" para que el usuario encuentre los archivos correctos. Cada usuario puede enviar cualquier solicitud que desee a su servidor. Siempre hay que validar todo el lado del servidor.

Entonces la respuesta es: no, no puede restringir , pero puede establecer una preselección pero no puede confiar en ella.

De forma alternativa o adicional, puede hacer algo similar al verificar el nombre de archivo (valor del campo de entrada) con JavaScript, pero esto no tiene sentido porque no proporciona protección y tampoco facilita la selección para el usuario. Sólo puede engañar a un webmaster para que piense que está protegido y abre un agujero de seguridad. Puede ser un problema para los usuarios que tienen extensiones de archivo alternativas (por ejemplo, jpeg en lugar de jpg), mayúsculas o ninguna extensión de archivo (como es común en los sistemas Linux).

Answer 4

Puede usar el evento de change para controlar lo que el usuario selecciona y notificarles en ese momento que el archivo no es aceptable. No limita la lista real de archivos mostrados, pero es lo más cercano que puede hacer del lado del cliente, además del atributo de accept mal soportado.

var file = document.getElementById(''someId'');

file.onchange = function(e){
    var ext = this.value.match(//.([^/.]+)$/)[1];
    switch(ext)
    {
        case ''jpg'':
        case ''bmp'':
        case ''png'':
        case ''tif'':
            alert(''allowed'');
            break;
        default:
            alert(''not allowed'');
            this.value='''';
    }
};

ejemplo en http://www.jsfiddle.net/gaby/7br93/1/

Answer 5

Realmente podría hacerlo con javascript, pero recuerde que js es del lado del cliente, por lo que en realidad estaría "advirtiendo a los usuarios" qué tipo de archivos pueden cargar, si desea EVITAR (restringir o limitar como dijo) cierto tipo de archivos que DEBE hazlo del lado del servidor.

Mire esta guía básica si desea comenzar con la validación del lado del servidor. Para ver el tutorial completo visite esta página .

¡Buena suerte!

Answer 6

Sé que esto es un poco tarde.

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf(''.''));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The /"FileUpload/" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

Answer 7

Sí, tiene usted razón. Es imposible con HTML. El usuario podrá elegir el archivo que desee.

Podría escribir un fragmento de código JavaScript para evitar enviar un archivo en función de su extensión. Pero tenga en cuenta que esto de ninguna manera evitará que un usuario malintencionado envíe cualquier archivo que realmente desee.

Algo como:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

Código HTML:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Answer 8

Técnicamente, puede especificar el atributo de accept (alternativa en html5 ) en el elemento de input , pero no se admite correctamente.

Answer 9

Usar etiqueta de input con atributo de accept

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Haga clic aquí para ver la última tabla de compatibilidad del navegador

Demo en vivo here

Para seleccionar solo archivos de imagen, puede utilizar esta accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Demo en vivo here

Solo se mostrarán gif, jpg y png, captura de pantalla de Chrome versión 44