Foros del Web » Programando para Internet » Javascript »

preview de imágenes

Estas en el tema de preview de imágenes en el foro de Javascript en Foros del Web. Hice el siguiente codigo en 2 archivos php, que funciona perfecto, cargando 3 previews de 3 imagenes en 100 x 100px antes de subirlas a ...
  #1 (permalink)  
Antiguo 28/01/2014, 15:17
 
Fecha de Ingreso: enero-2014
Ubicación: Chile
Mensajes: 11
Antigüedad: 10 años, 3 meses
Puntos: 1
preview de imágenes

Hice el siguiente codigo en 2 archivos php, que funciona perfecto, cargando 3 previews de 3 imagenes en 100 x 100px antes de subirlas a la BD..

El problema es que no logro poner todos los input en un mismo <form>, cada carga de archivo queda en un <form> diferente y me molesta para hacer el submit ya que tendría que poner 3 botones, uno para cada form..

traté con

$_FILES['archivo']['name']
$_FILES['archivo2']['name']
$_FILES['archivo3']['name']...

no funcionó, creo que el problema podría ser ("document.form"+id);) pero no me manejo con java

aquí dejo los codigos:

HTML

<html>
<head>
<script type="text/javascript">
function setpreview(id)
{
form=eval("document.form"+id);
form.target='iframe_null';
form.action='uploader.php?id='+id;
form.submit();
}
</script>
</head>

<body>
<form name="form1" action="" method="post" enctype="multipart/form-data">
<div>Personalizar tu imagen: </div>
<div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview(1)"/></div>
<div><img src="" id="picture1" alt="vista previa" height="100" width="100"/> </div>
</form>
<form name="form2" action="" method="post" enctype="multipart/form-data">
<div>Personalizar tu imagen: </div>
<div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview(2)"/></div>
<div><img src="" id="picture2" alt="vista previa" height="100" width="100"/> </div>
</form>
<form name="form3" action="" method="post" enctype="multipart/form-data">
<div>Personalizar tu imagen: </div>
<div><input name="archivo" id="archivo" type="file" size="35" onChange="setpreview(3)"/></div>
<div><img src="" id="picture3" alt="vista previa" height="100" width="100"/> </div>
</form>

<!-- iframe donde envia el formulario -->
<iframe src="about:blank" name="iframe_null" style="display:none">
</body>
</html>

UPLOADER PHP

<?php

$carpeta="imagenes_temporales/";
$name=$carpeta.basename($_FILES['archivo']['name']);
move_uploaded_file($_FILES['archivo']['tmp_name'],$name);

?>
<script type="text/javascript">
// Enviamos el nombre de la imagen al id picture de la pantalla de donde es llamado
parent.document.getElementById('picture<?php echo $_GET["id"];?>').src='<?php echo $name; ?>';
parent.document.getElementById('picture<?php echo $_GET["id"];?>').style.width='<?php echo $infoFile[0];?>px';
parent.document.getElementById('picture<?php echo $_GET["id"];?>').style.height='<?php echo $infoFile[1];?>px';
</script>

si lo pegan tal cual esta, les va a funcionar perfecto, solo tendrían que crear una carpeta que se llame "imagenes_temporales" en el directorio..

ayuda gracias.
  #2 (permalink)  
Antiguo 28/01/2014, 18:22
 
Fecha de Ingreso: enero-2014
Ubicación: Chile
Mensajes: 11
Antigüedad: 10 años, 3 meses
Puntos: 1
Respuesta: preview de imagenes en php

Ninguna idea de como unir todos los input en un mismo form??
Como dije el codigo funciona perfecto pero al tratar de poner todo en un mismo form deja de funcionar.
Ayuda gracias..
  #3 (permalink)  
Antiguo 28/01/2014, 18:30
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 8 meses
Puntos: 2237
Respuesta: preview de imagenes en php

Tal vez no has obtenido respuesta porque tu problema, como tú mismo lo dijiste, no es PHP, sino Javascript.

Muevo tu tema al foro adecuado.
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 28/01/2014, 19:54
 
Fecha de Ingreso: enero-2014
Ubicación: Chile
Mensajes: 11
Antigüedad: 10 años, 3 meses
Puntos: 1
Respuesta: preview de imagenes en php

Ok gracias, a ud se le ocurre alguna idea??
  #5 (permalink)  
Antiguo 28/01/2014, 23:01
 
Fecha de Ingreso: enero-2014
Ubicación: San Carlos
Mensajes: 1
Antigüedad: 10 años, 3 meses
Puntos: 0
Respuesta: preview de imagenes en php

Hola,

Con esta función de Javascript puedes lograr lo que quieres.

Código Javascript:
Ver original
  1. var loadImageFile = (function () {
  2.     if (window.FileReader) {
  3.         var    oPreviewImg = null, oFReader = new window.FileReader(),
  4.             rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
  5.  
  6.         oFReader.onload = function (oFREvent) {
  7.             if (!oPreviewImg) {
  8.                 var newPreview = document.getElementById("imagePreview");
  9.                 oPreviewImg = new Image();
  10.                 oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
  11.              //   oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
  12.                 newPreview.appendChild(oPreviewImg);
  13.             }
  14.             oPreviewImg.src = oFREvent.target.result;
  15.         };
  16.  
  17.         return function () {
  18.             var aFiles = document.getElementById("imageInput").files;
  19.             if (aFiles.length === 0) { return; }
  20.             if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
  21.             oFReader.readAsDataURL(aFiles[0]);
  22.         }
  23.  
  24.     }
  25.     if (navigator.appName === "Microsoft Internet Explorer") {
  26.         return function () {
  27.             document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
  28.  
  29.         }
  30.     }
  31. })();

mas este fragmento de HTML.

Código HTML:
Ver original
  1. <div id="imagePreview"></div>
  2. <form name="uploadForm">
  3. <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();"><br>
  4. <input type="submit" value="Send"></p>
  5. </form>

con eso funciona, hace las pruebas en localhost.

saludos .

[URL="http://stackoverflow.com/questions/13892435/post-image-base64-to-server-and-save-image-to-disk-same-fileupload-that-preview"]fuente[/URL]
  #6 (permalink)  
Antiguo 29/01/2014, 10:30
 
Fecha de Ingreso: enero-2014
Ubicación: Chile
Mensajes: 11
Antigüedad: 10 años, 3 meses
Puntos: 1
Respuesta: preview de imágenes

gracias, estuve intentando de hacer algo con esto pero
Tiene el mismo problema que el codigo que usaba yo, cada archivo queda en un <form> diferente.

Etiquetas: formulario, html, imagenes, php, preview
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 07:58.