HTML: ¿Cómo limitar la carga de archivos a ser solo imágenes?

Question

Con HTML, ¿cómo puedo limitar qué tipo de tipos de archivos se pueden cargar?

Para facilitar la experiencia del usuario, quiero limitar las cargas de archivos para que sean solo imágenes (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data"> 
<label for="image">Photo</label> 
<input name="image" type="file" /> 
</form> 

Answer 1

Editado

Si las cosas fueran como deberían ser, usted puede hacer esto a través del atributo "Aceptar".

http://www.webmasterworld.com/forum21/6310.htm

Sin embargo, los navegadores más o menos ignorar esto, así que esto es irrelavant. La respuesta corta es que no creo que haya una forma de hacerlo en HTML. Tendría que verificarlo en el lado del servidor.

La siguiente publicación anterior contiene información que podría ayudarlo con las alternativas.

File input 'accept' attribute - is it useful?

Answer 2

Sólo puede hacerlo de forma segura en el lado del servidor. El uso del atributo "aceptar" es bueno, pero también debe ser validado por el lado del servidor para que los usuarios no puedan cURLAR a su script sin esa limitación.

Le sugiero que: descarte cualquier archivo que no sea de imagen, advierta al usuario y vuelva a mostrar el formulario.

Answer 3

En última instancia, el filtro que se muestra en la ventana Examinar lo establece el navegador. Puede especificar todos los filtros que desee en el atributo Aceptar, pero no tiene garantía de que el navegador de su usuario se adhiera a él.

Su mejor opción es hacer algún tipo de filtrado en la parte final del servidor.

Answer 4

HTML5 dice <input type="file" accept="image/*">. Por supuesto, nunca confíe en la validación del lado del cliente: compruebe siempre en el lado del servidor ...

Answer 5

Verifique un proyecto llamado Uploadify. http://www.uploadify.com/

Es un programa para subir archivos basado en Flash + jQuery. Utiliza el cuadro de diálogo de selección de archivos de Flash, que le da la capacidad de filtrar tipos de archivos, seleccionar varios archivos al mismo tiempo, etc.

Answer 6

La entrada de archivo HTML5 tiene atributo de aceptación y también múltiples atributos. Al usar atributos múltiples, puede cargar múltiples imágenes en una instancia.

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

También puede limitar múltiples tipos de mime.

<input type="file" multiple accept='image/*|audio/*|video/*' > 

y otra forma de comprobar el tipo de mime utilizando el objeto de archivo.

objeto de archivo le da nombre, tamaño y tipo.

var files=e.target.files; 

var mimeType=files[0].type; // You can get the mime type 

También puede restringir al usuario para que algunos tipos de archivos se carguen con el código anterior.

Answer 7

Aquí está el HTML para cargar la imagen.De forma predeterminada, mostrará los archivos de imagen solo en la ventana de exploración porque hemos puesto accept="image/*". Pero aún podemos cambiarlo del menú desplegable y mostrará todos los archivos. Entonces, la parte de Javascript valida si el archivo seleccionado es una imagen real o no.

<div class="col-sm-8 img-upload-section"> 
    <input name="image3" type="file" accept="image/*" id="menu_images"/> 
    <img id="menu_image" class="preview_img" /> 
    <input type="submit" value="Submit" /> 
</div> 

Aquí en el evento de cambio, primero comprobemos el tamaño de la imagen. Y en la segunda condición if comprobamos si es o no un archivo de imagen.

this.files[0].type.indexOf("image") será -1 si no es un archivo de imagen.

document.getElementById("menu_images").onchange = function() { 
    var reader = new FileReader(); 
    if(this.files[0].size>528385){ 
     alert("Image Size should not be greater than 500Kb"); 
     $("#menu_image").attr("src","blank"); 
     $("#menu_image").hide(); 
     $('#menu_images').wrap('<form>').closest('form').get(0).reset(); 
     $('#menu_images').unwrap();  
     return false; 
    } 
    if(this.files[0].type.indexOf("image")==-1){ 
     alert("Invalid Type"); 
     $("#menu_image").attr("src","blank"); 
     $("#menu_image").hide(); 
     $('#menu_images').wrap('<form>').closest('form').get(0).reset(); 
     $('#menu_images').unwrap();   
     return false; 
    } 
    reader.onload = function (e) { 
     // get loaded data and render thumbnail. 
     document.getElementById("menu_image").src = e.target.result; 
     $("#menu_image").show(); 
    }; 

    // read the image file as a data URL. 
    reader.readAsDataURL(this.files[0]); 
}; 

Answer 8

<script> 

    function chng() 
    { 
     var typ=document.getElementById("fiile").value; 
     var res = typ.match(".jp"); 

     if(res) 
     { 
      alert("sucess"); 
     } 
     else 
     { 
      alert("Sorry only jpeg images are accepted"); 
      document.getElementById("fiile").value="; //clear the uploaded file 
     } 
    } 

</script> 

Ahora en la parte html

<input type="file" onchange="chng()"> 

este código comprobará si el archivo cargado es un archivo jpg o no y restringe la carga de otros tipos