¿Cómo permitir que <input type = "file"> acepte solo archivos de imagen?

376

Necesito cargar solo el archivo de imagen a través de la <input type="file">etiqueta.

En este momento, acepta todos los tipos de archivos. Pero, quiero restringirlo solo a extensiones de archivo de imagen específicas que incluyen .jpg, .gifetc.

¿Cómo puedo lograr esta funcionalidad?

html kbvishnu
fuente
¿Cuál es la tecnología utilizada en el lado del servidor?
Erdal G.
1
kbvishnu, quizás podría reconsiderar la respuesta que aceptó hace tanto tiempo. No tienes que aceptar otra respuesta. Solo estoy sugiriendo, en función de la cantidad de indicadores que hemos recibido sobre la respuesta y su nivel de votos en comparación con otras respuestas, que tal vez al menos debería considerar no aceptarla.
Aaron Hall

Respuestas:

944

Use el atributo accept de la etiqueta de entrada. Entonces, para aceptar solo PNG, JPEG y GIF, puede usar el siguiente código:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
Expandir fragmento

O simplemente:

<input type="file" name="myImage" accept="image/*" />
Expandir fragmento

Tenga en cuenta que esto solo proporciona una pista al navegador sobre qué tipos de archivos mostrar al usuario, pero esto se puede eludir fácilmente, por lo que siempre debe validar el archivo cargado en el servidor también.

Debería funcionar en IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, pero el soporte es muy incompleto en los móviles (a partir de 2015) y, según algunos informes, esto puede evitar que algunos navegadores móviles carguen algo, así que asegúrese de probar bien sus plataformas de destino.

Para obtener asistencia detallada sobre el navegador, consulte http://caniuse.com/#feat=input-file-accept

risas locas
fuente
@madcap ¿ accept="file/csv, file/xls"es válido?
KNU
19
¿Estás seguro de que es image/x-png? Según esta lista, es justo image/png. iana.org/assignments/media-types/media-types.xhtml
Micros
66
¡Esa debería ser la respuesta seleccionada! Simplemente falta una nota que diga que aún necesita verificar el lado del servidor (debido a que el navegador no es compatible, pero también por seguridad)
Erdal G.
1
Probablemente funcionó cuando la respuesta fue respuesta, pero solo lo intenté y no funcionó para FF. Solo necesitaba agregar accept = ". Png, .jpg, .jpeg" Por ejemplo: jsfiddle.net/DiegoTc/qjsv8ay9/4
Diego
1
No confíes en ello por completo. También puede aceptar fácilmente otros archivos. Solo necesita cambiar el tipo de archivo permitido en la ventana de archivo abierto.
164

Usando esto:

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

Funciona tanto en FF como en Chrome.

Tyilo
fuente
14
El atributo accept no es una herramienta de validación, todas las cargas deben validarse en el servidor, siempre ...
TlonXP
1
todavía no es compatible con el navegador nativo de Android, pero funciona bien en otros, supongo caniuse.com/#feat=input-file-accept
mcy
Me gusta esta solución porque en la solicitud de archivo el menú desplegable de tipo muestra "Archivos de imagen".
endurecidos
Tenga cuidado con esto, ya que permite SVG, que quizás no desee.
stephenmurdoch
Esto permitirá un máximo de archivos de imagen .png, .jpg, .jpeg, .gif, .bmp, .ico, .tiff, .svg, .ai, .psp, .pcd, .pct, .raw. Por lo tanto, es mejor mencionar el tipo específicamente.
Thamarai T
76

Úselo así 

<input type="file" accept=".png, .jpg, .jpeg" />

Funciono para mi

https://jsfiddle.net/ermagrawal/5u4ftp3k/

Er. Mohit Agrawal
fuente
Esto no funciona para iOS 12. El usuario aún puede elegir el video en el dispositivo.
user3160227
29

Pasos:
1. Agregue el atributo de aceptación a la etiqueta de entrada
2. Valide con javascript
3. Agregue la validación del lado del servidor para verificar si el contenido es realmente un tipo de archivo esperado

Para HTML y JavaScript:

<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script>
</body>
</html>

Explicación:

  1. El atributo accept filtra los archivos que se mostrarán en la ventana emergente del selector de archivos. Sin embargo, no es una validación. Es solo una pista para el navegador. El usuario aún puede cambiar las opciones en la ventana emergente.
  2. El javascript solo valida la extensión del archivo, pero realmente no puede verificar si el archivo seleccionado es un jpg o png real.
  3. Por lo tanto, debe escribir para la validación del contenido del archivo en el lado del servidor.
Surya Kameswara Rao Ravi
fuente
1
respuesta más completa
paranoidhominid
27

Esto se puede lograr mediante

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

Pero esta no es una buena manera. tienes que codificar en el lado del servidor para verificar que el archivo sea una imagen o no.

Compruebe si el archivo de imagen es una imagen real o una imagen falsa

if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    }
    else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}

Para más referencia, ver aquí

http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp

Ashok Devatwal
fuente
3

Usando type = "file" y accept = "image / *" (o el formato que desee), permita al usuario elegir un archivo con un formato específico. Pero debe volver a verificarlo en el lado del cliente, porque el usuario puede seleccionar otro tipo de archivos. Esto funciona para mi.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

Y luego, en tu script javascript

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }
Mati Cassanelli
fuente
Esta es la mejor respuesta, ya que comprobará si el archivo es en realidad una imagen sin que el desarrollador para especificar todas las diferentes extensiones que desea permitir
Adam Marshall
Ya entiendo tu idea. ¿Es esta una sintaxis JS válida const file: File = imageInput.files[0];:? Además, la asignación de id a la entrada no se realiza de manera convencional.
Ivan P.
De hecho, no es JS, es mecanografiado. El código de bloque se copió de un proyecto angular. Si desea usarlo en un archivo javascript, debe omitir la definición de tipo (: Archivo)
Mati Cassanelli
0

Si desea cargar varias imágenes a la vez, puede agregar un multipleatributo a la entrada. 

upload multiple files: <input type="file" multiple accept='image/*'>
Expandir fragmento

JerryGoyal
fuente