Problema Previsualizar imagen ajaxUpload php

javif · #1 (**permalink**) 13/12/2011, 07:55

Tengo el siguiente problema , solo con IE subo una imagen al servidor con la el plugin ajaxUpload en los demás navegadores no me da problema , en IE subo la primera imagen y la pre visualizo perfecto cuando quiero subir otra imgen de la misma extensión me muestra la que habia subido antes y no la nueva no se si es que la imagen queda en cache pero ya he hecho de todo para eliminar el cache del explorardor lo que me queda es postear a ver si alguien ha tenido es mismo problema.

aqui esta el codigo

Código PHP:

  <?php 
header ("Expires: Thu, 27 Mar 1980 23:59:00 GMT"); //la pagina expira en una fecha pasada 
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); //ultima actualizacion ahora cuando la cargamos 
header ("Cache-Control: no-cache, must-revalidate"); //no guardar en CACHE 
header ("Pragma: no-cache"); 
?> 
<!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> 
 
 
<script language="JavaScript" src="../script/jquery-1.3.1.min.js" type="text/javascript"></script> 
<script language="JavaScript" src="../script/AjaxUpload.2.0.min.js" type="text/javascript"></script> 
<script language="JavaScript" src="../script/funciones.js" type="text/javascript"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
<style type="text/css"> 
.contenido_personal { 
    position:relative; 
    overflow: hidden; 
    width: 100%; 
} 
.foto_personal { 
    position:relative; 
    height: 200px; 
    width: 200px; 
    float: left; 
    clear: both; 
    margin-top: 30px; 
    margin-right: 30px; 
    margin-bottom: 10px; 
    margin-left: 30px; 
     
} 
.imagen_personal{ 
    width:145px; 
    height:210px; 
    border: 1px dotted #666; 
} 
.contenido_personal_datos{ 
    position:relative; 
    float: left; 
    clear: none; 
    width: 300px; 
    margin: 0px; 
} 
.cedula_personal{ 
    position:relative; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    float: none; 
    clear: none;} 
.nombre_personal { 
    position:relative; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    float: none; 
    clear: none; 
} 
.apellido_personal { 
    position:relative; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    float: none; 
    clear: none; 
} 
.sexo_personal { 
    position:relative; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    float: none; 
} 
.fecha_nac_personal { 
    position:relative; 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 
.sede_personal { 
    position:relative; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    float: left; 
    display: block; 
    clear: both; 
    margin-left: 350px; 
} 
.dpto_personal { 
    position:relative; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    display: block; 
    float: left; 
    clear: both; 
    margin-left: 300px; 
} 
.ingresar_personal { 
    position:relative; 
    margin-top: 20px; 
    margin-bottom: 20px; 
    display: block; 
    float: left; 
    clear: both; 
    margin-left: 300px; 
} 
 
</style> 
</head> 
 
<body> 
<?php 
include('../../librerias/querys.php'); 
include('../../conexion.php'); 
if(isset($_REQUEST['submit'])): 
echo prueba; 
endif; 
?> 
<form action="in_personal.php" method="get" enctype="multipart/form-data" name="form1" > 
<div class="contenido_personal"> 
   
  <div class="foto_personal"> 
   <div class="imagen_personal"><img class="asd" src="../tmp/foto.png" width="145" height="210" /></div> 
      <div id="subir_imagen" >Subir Imagen</div> 
     
  </div> 
 
 
 <div class="contenido_personal_datos">      
 <div class="cedula_personal"> Cedula &nbsp;     
     <label for="cedula"></label> 
      <input type="text" name="cedula" id="cedula" /> 
 </div> 
  <div class="nombre_personal">Nombre  
    <label for="nombre"></label> 
    <input type="text" name="nombre" id="nombre" /> 
  </div> 
  <div class="apellido_personal">Apellido 
    <label for="apellido"></label> 
    <input type="text" name="apellido" id="apellido" /> 
  </div> 
  <div class="sexo_personal">Sexo 
    M<input type="radio" name="radio" id="sexo" value="M" />F<input type="radio" name="radio" id="sexo" value="F" /> 
    <label for="sexo"></label> 
  </div> 
  <div class="fecha_nac_personal">Fecha Nacimiento  
    <label for="fecha_nac"></label> 
    <input name="fecha_nac" type="text" id="dateArrival" onClick="popUpCalendar(this, form1.dateArrival, 'dd-mm-yyyy');" size="10"> 
  </div> 
  </div> 
   
  <div class="sede_personal"> 
  Sede 
  <?php 
  $registros=mysql_query("select id, descripcion  FROM  sedes",$conexion) 
  or die("Problemas en el select".mysql_error()); 
  echo "<select name='sede' id='sede'>"; 
  while($reg=mysql_fetch_assoc($registros)){ 
       
      echo "<option value=$reg[id]>".$reg['descripcion']."</option>"; 
      } 
      echo "</select>"; 
   
   ?> 
  </div> 
    <div class="dpto_personal">  
    Departamentos 
    <?php 
  $registros2=mysql_query("select id, ucfirst(descripcion) as descripcion FROM departamentos order by descripcion",$conexion) 
  or die("Problemas en el select".mysql_error()); 
  echo "<select name='dpto' id='dpto'>"; 
  while($reg2=mysql_fetch_assoc($registros2)){ 
       
      echo "<option value=$reg2[id]>".$reg2['descripcion']."</option>"; 
      } 
      echo "</select>"; 
   
   ?></div> 
    
   <div class="ingresar_personal"><input name="Ingresar" type="submit" /></div> 
</div> 
<input type="hidden" name="prueba" value="<?php echo md5($reg2['id'])?>"/> 
</form> 
</body> 
</html>

este es un simple formulario

aqui esta el JS

Código Javascript:

Ver originalvar boton=$("#subir_imagen");
    new AjaxUpload(boton, {
        action: 'upload.php',
        cache: 'false',
        onSubmit : function(file , ext){
            
            
        if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
            // extensiones permitidas
            alert('Error: Solo se permiten imagenes');
            // cancela upload
            return false;
        } else {
            $(".asd").attr({'src':'../tmp/1.gif',
            'width':'31',
            'height':'31'});
            boton.text('Uploading');
            this.disable();
        }
        }//allowedExtensions: ['jpg', 'jpeg', 'png', 'gif']
        
        ,
        onComplete: function(file,response){
            boton.text('Upload');
            
            if($.browser.msie){
                $.ajaxSetup({ cache: false });
                $(".imagen_personal").html("<img src="+response+" width=145px height=210px");
                
                
                } 
            
            // enable upload button
                        
            else{// Agrega archivo a la lista
            
            $("#mostrar").css("display","block");
            
            $(".asd").attr({'src':response,
            'width':'145',
            'height':'210'
            });
            }
            this.enable();
        }   
    });

aqui esta el Php que recibe los datos :

Código PHP:

  $uploaddir = '../tmp/'; 
$tipo=$_FILES['userfile']['name']; 
 
      $img_tipo=substr($tipo,strripos($tipo,'.')); 
     $_FILES['userfile']['name']='tmp'.$img_tipo; 
       
      $uploadfile = $uploaddir.'/'. basename($_FILES['userfile']['name']); 
       
      if(file_exists( $uploadfile)): 
      unlink($uploadfile); 
     endif;  
 
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) { 
  echo $uploadfile; 
} else { 
  echo "error"; 
}

iviamontes · #2 (**permalink**) 13/12/2011, 08:39

el problema no es de php, es un problema de cacheo, eso lo puedes resolver, enviando un parametro aletario, ej

<img src="image.jpg?code=<?php echo time(); ?>" />