Tengo un problema al tratar de previsualizar una imagen que voy a subir al servidor. El boton examinar llama a la función generar_preview que recibe la ruta de la imagen y le agrega "file:///" y de ahí debería mostrarla en el div pic pero sólo se ve como un icono de que hay una imagen pero no la imagen.
Gracias de antemano.
Lo tengo todo en una sola página:
Código PHP:
<?php
//incluímos la clase ajax
require ('xajax/xajax_core/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('utf-8');
$xajax->configure('decodeUTF8Input',true);
function generar_preview($ruta){
//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
$ruta= "file:///".$ruta;
$imagen="<img id='vistaprevia' src='$ruta' alt='' width='119' height='140'>";
//$imagen=$cod_provincia;
$respuesta->Assign("pic","innerHTML",$imagen);
//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}
//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("generar_preview");
//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequest();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Profesores</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
background-image: url(images/otro%20fondo.jpg);
}
.Estilo1 {font-family: Arial, Helvetica, sans-serif}
.pic{
width:119px;
height:140px;
margin-right:auto;
margin-left:auto;
}
-->
</style>
<SCRIPT language=JavaScript>
function agregarOpc(){
var selec = form.Nivel.options;
var combo = form.Contenido.options;
combo.length = null;
var lista = document.getElementById("Nivel");
// Obtener el valor de la opción seleccionada
var valorSeleccionado = lista.options[lista.selectedIndex].value;
if (valorSeleccionado == "")
{
var seleccionar = new Option("<-- esperando selección","","","");
combo[0] = seleccionar;
}
if (valorSeleccionado == 3)
{
var t1 = new Option("Ángulos","301","","");
var t2 = new Option("Prismas/Pirámides","302","","");
var t3 = new Option("Trinágulos","303","","");
combo[0] = t1;
combo[1] = t2;
combo[2] = t3;
}
if (valorSeleccionado == 4)
{
var c1 = new Option("Cilindros/Conos","401","","");
var c2 = new Option("Rectas","402","","");
var c3 = new Option("Cuadriláteros","403","","");
combo[0] = c1;
combo[1] = c2;
combo[2] = c3;
}
if (valorSeleccionado == 5)
{
var q1 = new Option("Cuerpos Redondos","501","","");
var q2 = new Option("Rectas","502","","");
combo[0] = q1;
combo[1] = q2;
}
}
</script>
<?php
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript("xajax/");
// $xajaxp->printJavascript("xajax/");
?>
</head>
<body>
<div id="content">
<!-- header begins -->
<!-- header ends -->
<!-- content begins -->
<div id="main">
<p> </p>
<p> </p>
<p> </p>
<?php
include("Ejercicio.inc");
include("Profesor.inc");
error_reporting(0);
session_start();
$prof=new Profesor;
$prof->Rut = $_SESSION['Rut'];
$prof->Buscar();
if($prof->num_niveles>0)
{
form_Ejercicios();
}
else
{
echo"<div class= 'tabla_mensaje'><b><font color='red'><h1>No tiene ningún curso asignado</h1></font></b></div>";
}
function form_Ejercicios()
{
$prof=new Profesor;
$prof->Rut = $_SESSION['Rut'];
$prof->Buscar();
$Autor = $_SESSION['Rut'];
$imagen = "";
$TxtPregunta = $_POST["TxtPregunta"];
$TxtAlt1 = $_POST["TxtAlt1"];
$TxtAlt2 = $_POST["TxtAlt2"];
$TxtAlt3 = $_POST["TxtAlt3"];
$Nivel = $_POST["Nivel"];
$Tipo_Contenido = $_POST["Contenido"];
$Resp_Correcta = $_POST["Correcta"];
if (isset ($_FILES["imagen"])) {
// obtenemos los datos del archivo
$tamano = $_FILES["imagen"]['size'];
$tipo = $_FILES["imagen"]['type'];
$archivo = $_FILES["imagen"]['name'];
$prefijo = substr(md5(uniqid(rand())),0,6);
if ($archivo != "") {
// guardamos el archivo a la carpeta files
$destino = "FOTOS/".$prefijo."_".$archivo;
$destino2 = $prefijo."_".$archivo;
if (copy($_FILES['imagen']['tmp_name'],$destino)) {
//echo 'El archivo se subio con el nombre de '.$destino2.'<BR>';
//echo 'La direccion completa es: '.$destino;
$imagen=$destino;
}
else {
echo 'Error al cargar el archivo';
}
}
//print_r($_POST);
}
if(isset($TxtPregunta)&&isset($TxtAlt1)&&isset($TxtAlt2)&&isset($TxtAlt3)&&isset($Nivel)&&isset($Tipo_Contenido)&&isset($Resp_Correcta))
{
if ($_POST['Guardar']=="Guardar")
{
if ((!empty($TxtPregunta))&&(!empty($TxtAlt1))&&(!empty($TxtAlt2))&&(!empty($TxtAlt3))&&(!empty($Tipo_Contenido))&&(!empty($Resp_Correcta)))
{
$ObjEjerc = new Ejercicio($Autor,$Nivel,$Tipo_Contenido,$TxtPregunta,$TxtAlt1,$TxtAlt2,$TxtAlt3,$Resp_Correcta,$imagen);
$ObjEjerc->Ingresar();
echo "<font color=red><b>Ejercicio ingresado correctamente</b></font>";
}
else
{
echo "<font color=red><b>Complete todos los campos</b></font>";
}
}
}
?>
<div id="pic" class="pic">
</div>
<form id="form" name="form" method="post" action="" enctype="multipart/form-data">
<table width="500" border="0" align="center" id="tabla" class="izquierda">
<tr>
<td valign="top"><span class="Estilo5">NIVEL:</span></td>
<td colspan="2"><label></label></td>
</tr>
<tr>
<td valign="top"><span class="Estilo5">CONTENIDO:</span></td>
<td colspan="2"><label></label></td>
</tr>
<tr>
<td valign="top"><span class="Estilo5">PREGUNTA:</span></td>
<td colspan="2"><label> </label></td>
</tr>
<tr>
<td valign="top"><span class="Estilo5">IMAGEN</span></td>
<td><label>
<input name="imagen" type="file" id="imagen" tabindex="5" maxlength="100" onChange="xajax_generar_preview(document.getElementById('imagen').value)">
</label> </td><td><label></label></td>
</tr>
<tr>
<td valign="top"><span class="Estilo5">ALTERNATIVA 1</span></td>
<td colspan="2"><label></label></td>
</tr>
<tr>
<td valign="top"><span class="Estilo5">ALTERNATIVA 2</span></td>
<td colspan="2"><label></label></td>
</tr>
<tr>
<td valign="top"><span class="Estilo5">ALTERNATIVA 3</span></td>
<td colspan="2"><label></label></td>
</tr>
<tr>
<td valign="top"><span class="Estilo5">CORRECTA:</span></td>
<td colspan="2"><label></label></td>
</tr>
<tr>
<td valign="top"><span class="Estilo5">
<label>
<input name="Guardar" type="submit" class="boton2" id="Guardar" value="Guardar" />
</label>
</span></td>
<td colspan="2"> </td>
</tr>
</table>
<?PHP
}
?>
<p>
<!--content ends -->
</p>
<p> </p>
<p>
<!--footer begins -->
</p>
<!-- footer ends-->
</body>
</html> 
