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

restringir tipo de archivos input file

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

Aquí está el HTML para la carga de imágenes. Por defecto, mostrará los archivos de imagen solo en la ventana de navegació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 verificamos el tamaño de la imagen. Y en la segunda condición if , verificamos 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 2

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 3

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

Answer 4

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 puedes 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 5

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

Es un cargador de archivos basado en Flash + jQuery. Utiliza el cuadro de diálogo de selección de archivos de Flash, que le permite filtrar tipos de archivos, seleccionar varios archivos al mismo tiempo, etc.

Answer 6

Solo 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 7

Editado

Si las cosas fueran como DEBERÍAN, podría hacerlo a través del atributo "Aceptar".

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

Sin embargo, los navegadores prácticamente ignoran esto, así que esto es irrelavante. 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 ayudarte con las alternativas.

Atributo ''accept'' de entrada de archivo - ¿es útil?

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 verificará si el archivo cargado es un archivo jpg o no y restringe la carga de otros tipos