restringuir los archivos permitidos en el explorer que abre un input file

iovan · #1 (**permalink**) 31/05/2010, 20:54

Hola amigos.

Verán me gustaría hacer una funcion la cual me permita elegir que extenciones permitir en el explorer que se abre al presionar sobre un input type='file'

He visto que se puede hacer.

Muchas gracias.

zerokilled · #2 (**permalink**) 31/05/2010, 20:57

sera con el atributo accept, pero como tal no existe funcion o propiedad alguna desde javascript para controlar eso. de todos modos, deberias controlar eso desde el servidor porque desde el lado cliente es facil burlar el control.

iovan · #3 (**permalink**) 31/05/2010, 21:05

Gracias amigo.

He estado mirando que con JQuery es facil lograr esto, pero ya no quiero hacer uso de Jquery tengo ya bastante de este tipo de codigo en el mismo archivo y ya me estoy haciendo bolas.

jeje..

Gracias amigo.

Una pregunta más, cual es la propiedad del input type='file' que controla los eventos cuando se ha seleccionado un archivo.

me refiero a estas:

onblur=""
onchange=""
onclick=""
onfocus=""
onkeydown=""
onkeypress=""
onkeyup=""
onmousedown=""
etc...

lo que quiero es ejecutar una funcion ajax cuando se aya seleccionado un archivo.

Saludos

zerokilled · #4 (**permalink**) 31/05/2010, 21:43

supongo que con onchange te debe funcionar... que vendria siendo cuando el campo cambia de valor, por tanto debe suceder cuando se escoge un archivo.

iovan · #5 (**permalink**) 31/05/2010, 21:54

GRacias amigo. Si es verdad ya estoy aplicando el ejemplo.

Saludos.

zerokilled · #6 (**permalink**) 31/05/2010, 22:15

esta claro que por obligacion deberia manejar este asunto desde el lado del servidor... punto y aparte. no recuerdo donde pero hace una semana o dos habia leido que los navegadores mas populares no soportan bien el atributo accept. la cierto es que no se que verdad sea. como ya habia dicho, desde javascript no hay forma de aplicar un filtro. es decir, que solo ciertos tipos de archivos sean visibles.

ahora bien, lo unico que se me ocurre es, y con algo de suerte, leer el valor del campo file y determinar la extension del archivo. si no coincide con el deseado, mediante DOM borrar el campo file, crear uno nuevo y agregarlo al documento. ¿por que de esta forma? porque por seguridad no se puede modificar el valor del campo file, incluso ni para vaciar la cadena. por otro lado, hay navegador que devuelven un string diferente al que muestra el campo cuando se intenta leer. de ahi que con algo de suerte puedas leer el tipo de archivo...

iovan · #7 (**permalink**) 31/05/2010, 22:39

Gracias amigo.

Eso ultimo es lo que voy a hacer.

Por el momento estoy aplicando una funcion en JS al evento onchange del campo file. En dicha funcion estoy consultando por POST una archivo PHP mediante AJAX.

En este archivo en PHP es donde valido la extención del archivo y respondo por AJAX.

Pero bueno esto ya lo tengo echo y me ha surgido otra duda.

Agradecería si me pudieras ayudar.

¿Como evitar que el usuario escriba en un campo formulario tipo File, sin dejar deshabilitado tambien el boton de "Seleccionar archivo"?

Gracias amigo.

zerokilled · #8 (**permalink**) 31/05/2010, 23:25

no lo he intentado, pero prueba con readonly.

caricatos · #9 (**permalink**) 31/05/2010, 23:38

Hola:

Tal vez te sirva este artículo: Revisar las imágenes antes de subirlas. Como comenta zerokilled, la eficacia solo te la puede ofrecer la interacción con el servidor.

Saludos

iovan · #10 (**permalink**) 01/06/2010, 00:21

Gracias amigos, ya había visto aquel tema. Pero se me complica adaptarlo a mi código.

Verán les pondre una manera que a mi parecer es más sencilla para validar extenciones de archivos, yo la hice y por ser nuevo en esto uso código mas simple.

Además que son menos archivos y menos lineas.

validador.php

Código PHP:

Ver original<?php
 
$imageFile = $_POST['imageFile'];
$imageType = strtolower(substr(strrchr($imageFile, "."), 1));
 
if($imageType == "jpg" || $imageType == "gif" || $imageType == "png" || $imageType == "bmp"){ echo "1"; } else { echo "2"; }
 
?>

archivo html

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript">
   //Creo objeto XMLHTTPREQUEST
   function nuevoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
   
   //Valido extencion de la imagen
   function validar(){
      var ajax = nuevoAjax(),
          imagen = document.getElementById('imageFile').value;
          
          function updateTipsAlert(t){
            alert(t);
            return false;
          }
          
          function updateTips(t){
            document.getElementById('validates').innerHTML = t;
          }
 
if(imagen.length <= 0) { updateTips('Debes escoger un archivo'); } 
  else {
 
    ajax.open("POST", "validador.php",true);      
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            
        if(ajax.responseText==2) { 
        
        updateTipsAlert('El formato no es valido'); 
           
                                //Creo un nuevo campo file
            tagDiv = document.createElement('div');
            tagDiv.setAttribute("style","position:absolute; top:0px; left:0px; width:148px; height:20px; background:url(http://midominio.com/transparente.gif); background-repeat:repeat;");
            
            control = document.createElement("input");
            control.setAttribute("type", "file");
            control.setAttribute("name","imageFile");
            control.setAttribute("id","imageFile");
            control.setAttribute("onchange","validar();");
 
            //Borro el campo file anterior
            document.getElementById('validateTips').innerHTML = "";
            
                                          document.getElementById('validateTips').appendChild(tagDiv);
            document.getElementById('validateTips').appendChild(control);
        
        }
            
        }
    }
    
}
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("imageFile="+imagen);
          
          
   }
 
</script>
</head>
 
<body>
<p id="validates"></p>
<div id="validateTips" style="position:relative;">
<div style="position:absolute; top:0px; left:0px; width:148px; height:20px; background:url(http://midominio.com/transparente.gif); background-repeat:repeat;"></div>
<input type="file" name="imageFile" id="imageFile" onchange="validar();"  />
</div>
</body>
</html>

Espero que se entienda, no lo he organizado pero lo he probado y funciona.

Que opinan.

Saludos.

caricatos · #11 (**permalink**) 01/06/2010, 00:30

Pues, si vas a usar el servidor, entonces busca algo más seguro, cualquiera puede subir un archivo con extensión falsa (no sabes cuanta gente fastidiosa hay en la red con el único motivo de "pinchar" páginas de terceros -cosa que podrías ser en cualquier momento-), Y con getImageSize de php, puedes detectar el tipo de archivo correcto, o mejor usar el type del array $_FILES... el mime que te deviuelve es fiable.

Además, me parece que no todos los navegadores procesan los adjuntos con la lista $_POST.

Saludos

iovan · #12 (**permalink**) 01/06/2010, 00:54

Muchas gracias amigo.

Si estaba pensando en utilizar $_FILES['campo']['type'] y validar por tipos mime como tu dices.

Gracias amigo.
Te mando un saludo y que tengas buen día.