Foros del Web » Programando para Internet » Javascript »

Preview de imagenes

Estas en el tema de Preview de imagenes en el foro de Javascript en Foros del Web. Bueno miren estoy jaciendo un preview de imagenes y solo me falta una parte que me cargue las imagenes desde el pc del usario les ...
  #1 (permalink)  
Antiguo 08/03/2009, 00:50
 
Fecha de Ingreso: diciembre-2007
Mensajes: 927
Antigüedad: 16 años, 4 meses
Puntos: 12
Preview de imagenes

Bueno miren estoy jaciendo un preview de imagenes y solo me falta una parte que me cargue las imagenes desde el pc del usario les dejo mi script y problema

Problema:
me sale este erro en el depurador de js:
Código:
"Not allowed to load local resource: file:///C:/Users/Edy/Pictures/Horario/Horario.jpg," source:  (0)
y no se como arreglarlo les dejos los codes

Funcion que le la foto y la envia por iframe
Código javascript:
Ver original
  1. function preview() {
  2.    imagen1=new Image;
  3.    imagen1.src = document.form2.imagen.value;
  4.    var rutaimg = imagen1.src;
  5.       function str_replace(cadena, cambia_esto, por_esto) {
  6.             return cadena.split(cambia_esto).join(por_esto);
  7.       }
  8.    rutaimg = str_replace(rutaimg,'file:///','');
  9.    alert(rutaimg);
  10.    document.getElementById('imagen_pre').src = 'preview.php?img='+rutaimg;   //rutaimg.value
  11.    //document.images['picture'].src = imagen1.src;
  12. }

Este es el code donde lo subes el form se llama 'form2' perdon pero no puedo pasar mas del code
Código PHP:
  <tr>
    <
td colspan="2" class="tabla_centro">Imagen
      <
label>
        <
input type="file" name="imagen" id="imagen" onchange="preview()" />
        <
br />
      </
label>
      <
iframe src="preview.php" width="150" height="150" scrolling="no" id="imagen_pre"></iframe></td>
  </
tr
Y la tercera parte es el preview.php que es el iframe y llama la imagen

Código PHP:
<?
if(isset($_GET['img']) and $_POST['img'] != '') {
    
?>
    <img src="<? echo $img?>" alt="vista previa" name="imagenp" width="150"  height="150" id="imagenp" />
    <? }else{ ?>
    <img src="../images/index_38.gif" alt="vista previa" name="imagenp" width="150"  height="150" id="imagenp" />
<? ?>

No se que se pieda hacer ya tienen permisos 777

salu2
  #2 (permalink)  
Antiguo 08/03/2009, 02:04
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Preview de imagenes

Hola:

Por razones de seguridad, los navegadores no pueden acceder al sistema de archivos del visitante, así que la única forma realmente eficáz para prever archivos es subiéndolos.

Te recomiendo este artículo: Revisar las imágenes antes de subirlas.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 08/03/2009, 17:58
 
Fecha de Ingreso: diciembre-2007
Mensajes: 927
Antigüedad: 16 años, 4 meses
Puntos: 12
Respuesta: Preview de imagenes

Bueno lo he checado y me sale este error

Chrome JavaScript Debugger
Type 'help' for a list of commands.
attached to Sucursal en Linea
uncaught exception TypeError: Cannot set property 'disabled' of undefined
$ next
"Uncaught TypeError: Cannot set property 'disabled' of undefined," source: http://www.sucursalenlinea.com/Edy/funciones.js (27)
que es esta linea

fichero.form[campos[i]].disabled = false;

paso todos los codes

Prueba.php [donde esta el formu
Código HTML:
<!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" />
<title>Documento sin título</title>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return validar(this)">
  <label>
    <input type="file" name="archivo" id="archivo" onchange="checkear_extension(this)"/>
  </label>
  <br />
  <iframe src="preview2.php" width="auto" height="auto" id="imagen_pre" frameborder="0"></iframe>
<br />
  <label>
    <input type="submit" name="button" id="button" value="Enviar" />
  </label>
</form>
</body>
</html> 
preview.php
Código PHP:
<?php
    session_name
("Preview");
    
session_start();
    
$defecto "index_38.gif";
    
$Ok = isset($_FILES["archivo"]);
    
$url = ($Ok) ? $_FILES["archivo"]["tmp_name"] : $defecto;
    list(
$anchura$altura$tipoImagen$atributos) = getimagesize($url);
    
$error = (isset($atributos)) ? 1;
    
$los_tipos = array("gif""jpg""png");
    
$tipo = ($Ok) ? "image/".$los_tipos[$tipoImagen 1] : "image/gif";
    
$fichero = ($Ok && ($error == 0)) ? $_FILES["archivo"]["name"] : $defecto;
    
$tam filesize($url);
    
$OkTam = isset($_POST["maxpeso"]);
    
$OkAncho = isset($_POST["maxancho"]);
    
$OkAlto = isset($_POST["maxalto"]);
    
$maxTam = ($OkTam) ? (int) $_POST["maxpeso"]: 100000;
    
$maxAncho = ($OkAncho) ? (int) $_POST["maxancho"]: 640;
    
$maxAlto = ($OkAlto) ? (int) $_POST["maxalto"]: 480;
    
$error += ($tam <= $maxTam) ? 2;
    
$ancho = ($error == 1) ? $anchura;
    
$alto = ($error == 1) ? $altura;
    
$error += ($ancho <= $maxAncho) ? 4;
    
$error += ($alto <= $maxAlto) ? 8;
    
$datos = ($error == 0) ? $url $defecto;
    
$onload = ($Ok) ? "onload='parent.datosImagen($tam, $ancho, $alto, $error)'"'';
    
$datos_imagen fread(fopen($datos"rb"), filesize($datos));
    
$_SESSION["cont"] = $datos_imagen;
    
$_SESSION["tipo"] = ($error == 0) ? $tipo "image/gif";
?>
<html>
<head>
<style type="text/css" >
html    {
    margin: 0;
    height: 100%;
}
body    {
    height: 100%;
    background-image: url(preview2.php?dato=<?=$fichero;?>);
    background-repeat: no-repeat;
    background-position: center center;
}
</style>
</head>
<body <?=$onload;?>>
    
</body>
</html>
preview2.php
Código PHP:
<?php
session_name
("Preview");
session_start();
$url = ($_SESSION["cont"] == "")
    ? 
fread(fopen("index_38.gif""rb"), filesize("index_38.gif"))
    : 
$_SESSION["cont"];
$tip = ($_SESSION["tipo"] == "")
    ? 
"image/gif"
    
$_SESSION["tipo"];
header("Content-type: $tip");
echo 
$url;
session_destroy();
?>
funciones.js
Código javascript:
Ver original
  1. function limpiar()  {
  2.     f = document.getElementById("archivo");
  3.     nuevoFile = document.createElement("input");
  4.     nuevoFile.id = f.id;
  5.     nuevoFile.type = "file";
  6.     nuevoFile.name = "archivo";
  7.     nuevoFile.value = "";
  8.     nuevoFile.onchange = f.onchange;
  9.     nodoPadre = f.parentNode;
  10.     nodoSiguiente = f.nextSibling;
  11.     nodoPadre.removeChild(f);
  12.     (nodoSiguiente == null) ? nodoPadre.appendChild(nuevoFile):
  13.         nodoPadre.insertBefore(nuevoFile, nodoSiguiente);
  14. }
  15.  
  16. function validar(f) {
  17.     enviar = /.(gif|jpg|png)$/i.test(f.archivo.value);
  18.     if (!enviar)    alert("seleccione imagen");
  19.     return enviar;
  20. }
  21.  
  22. function checkear_extension(fichero)    {
  23.  
  24.     function prever() {
  25.         var campos = new Array("maxpeso", "maxalto", "maxancho");
  26.         for (i = 0, total = campos.length; i < total; i ++)
  27.             fichero.form[campos[i]].disabled = false;
  28.         actionActual = fichero.form.action;
  29.         targetActual = fichero.form.target;
  30.         fichero.form.action = "preview2.php";
  31.         fichero.form.target = "ver";
  32.         fichero.form.submit();
  33.         for (i = 0, total = campos.length; i < total; i ++)
  34.             fichero.form[campos[i]].disabled = true;
  35.         fichero.form.action = actionActual;
  36.         fichero.form.target = targetActual;
  37.     }
  38.  
  39.     function no_prever() {
  40.         alert("El fichero seleccionado no es válido...");
  41.         limpiar();
  42.     }
  43.  
  44.     (/.(gif|jpg|png)$/i.test(fichero.value)) ? prever() : no_prever();
  45. }
  46.  
  47. function datosImagen(peso, ancho, alto, error)  {
  48.     function mostrar_error()    {
  49.         enviar = false;
  50.         mensaje = "Ha habido un error (error nº " + error + "):";
  51.         if (error % 2 == 1) // tipo incorrecto
  52.             mensaje += "nel fichero no es válido";
  53.         error = parseInt(error / 2);
  54.         if (error % 2 == 1) // excede en peso
  55.             mensaje += "nla imagen pesa mogollón (" + peso + ").";
  56.         error = parseInt(error / 2);
  57.         if (error % 2 == 1) // excede en anchura
  58.             mensaje += "nla imagen excede en anchura (" + ancho + ").";
  59.         error = parseInt(error / 2);
  60.         if (error % 2 == 1) // excede en altura
  61.             mensaje += "nla imagen excede en altura (" + alto + ").";
  62.         error = parseInt(error / 2);
  63.         alert (mensaje);
  64.         with (document.forms)   {
  65.             formu.peso.value = 0;
  66.             formu.ancho.value = 0;
  67.             formu.alto.value = 0;
  68.         }
  69.         limpiar();
  70.     }
  71.  
  72.     if (error == 0) with (document.forms)   {
  73.         formu.peso.value = peso;
  74.         formu.ancho.value = ancho;
  75.         formu.alto.value = alto;
  76.     }
  77.     else    mostrar_error();
  78. }
  #4 (permalink)  
Antiguo 08/03/2009, 18:13
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Preview de imagenes

No vi todo, pero el iframe no tiene un atributo name, que es el que se supone que luego debés aplicar como target del formulario.
  #5 (permalink)  
Antiguo 08/03/2009, 20:10
 
Fecha de Ingreso: diciembre-2007
Mensajes: 927
Antigüedad: 16 años, 4 meses
Puntos: 12
Respuesta: Preview de imagenes

Funciono Gracias :D!
Una cosa mas no sabes como poner de que un cargando... mientras que se sube la imagen?

salu2

Última edición por Edig; 08/03/2009 a las 20:16
  #6 (permalink)  
Antiguo 09/03/2009, 00:47
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años
Puntos: 1284
Respuesta: Preview de imagenes

Hola:

Bueno, creo que ya lo habían preguntado, y puedes ver el código en el mismo formulario del ejemplo, pero con extensión php: Formulario (chequeo de imágenes)... en vez de tener texto, se muestra un reloj de arena... puedes ver el código, pero te adelanto que se trata de poner una capa sobre el iframe con el texto y/o dibujo que quieras que se muestre durante ese submit, y con el evento de carga que se vuelva a ocultar.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:22.