historia - html pdf
Cómo permitir que<input type=“file”> acepte solo archivos de imagen (6)
Esto se puede lograr por
<input type="file" accept="image/*" />
Pero esta no es una buena manera. tienes que codificar en el lado del servidor para verificar el archivo de 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í.
w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp
Necesito subir un archivo que sea una imagen. Estoy usando <input type="file"> .
Sin embargo, esto acepta todo tipo de archivos. Solo necesito archivos con extensiones como .jpg , .gif , etc.
¿Cómo puedo hacer que el cuadro de diálogo de carga permita la selección de solo archivos de imagen?
Pasos:
1. Añadir atributo de aceptación a la etiqueta de entrada
2. Validar 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:
- El atributo de aceptación 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 todavía puede cambiar las opciones en la ventana emergente.
- El javascript solo valida para la extensión de archivo, pero no puede verificar si el archivo seleccionado es un jpg o png real.
- Así que tienes que escribir para la validación del contenido del archivo en el lado del servidor.
Usalo asi
<input type="file" accept=".png, .jpg, .jpeg" />
Funciono para mi
Usando esto:
<input type="file" accept="image/*">
Funciona tanto en FF como en Chrome.
Utilice el atributo de aceptación de la etiqueta de entrada. Por lo tanto, para aceptar solo PNG, JPEG y GIF, puede utilizar el siguiente código:
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
O simplemente:
<input type="file" name="myImage" accept="image/*" />
Tenga en cuenta que esto solo proporciona una sugerencia para el navegador sobre qué tipos de archivos mostrar al usuario, pero esto puede ser fácilmente evitado, 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. Asegúrate de probar bien tus plataformas de destino.
Para obtener información detallada sobre la compatibilidad con el navegador, consulte http://caniuse.com/#feat=input-file-accept
puede usar el atributo de accept para <input type="file"> lea esta documentación w3schools.com/tags/att_input_accept.asp