JavaScript - AYUDA: subir imagenes con preview (PHAP/JS) todo bien pero...

   
Vista:

AYUDA: subir imagenes con preview (PHAP/JS) todo bien pero...

Publicado por jose luis (1 intervención) el 29/01/2014 04:54:46
Tengo 2 archivos: uno con el formulario y un php que procesa los datos del formulario.
El formulario son 3 cargadores de imagenes que muestran una miniatura de 100x100 de la imagen antes de subirla a la BD.
Funciona perfecto el problema es que cada boton de carga se encuentra en un <form> diferente,
por lo tanto queda 1 <form> para cada cargador de imagen y molesta para el submit pq tendria que poner un boton a cada una.

quien me ayuda a ponerlos todos en un solo <form>, el problema lo tengo con JS ya que por PHP intenté de mil maneras y ninguna me dio.

aca dejo los codigos:

archivo con formulario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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="subir/loader.gif" 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>

archivo procesador

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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>

en la carpeta "imagenes_temporales" se cargan los preview de las fotos..
AYUDA!!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Dionisio

AYUDA: subir imagenes con preview (PHAP/JS) todo bien pero...

Publicado por Dionisio (6 intervenciones) el 05/02/2014 15:43:53
yo lo haria de esta manera solo deberias intergrar y hacer algunos cambios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
 
</head>
 
<body>
	<form name="form1" action="uploader-php.php" method="post" enctype="multipart/form-data">
		<div>Personalizar tu imagen: </div>
		<div><input name="archivo[]" class="archivo" type="file" size="35" onChange="setpreview(1)"/></div>
		<div><img src="" id="picture1" alt="vista previa" height="100" width="100"/> </div>
 
		<div>Personalizar tu imagen: </div>
		<div><input name="archivo[]" class="archivo" type="file" size="35" onChange="setpreview(1)"/></div>
		<div><img src="" id="picture1" alt="vista previa" height="100" width="100"/> </div>
 
        <div>Personalizar tu imagen: </div>
		<div><input name="archivo[]" class="archivo" type="file" size="35" onChange="setpreview(1)"/></div>
		<div><img src="" id="picture1" alt="vista previa" height="100" width="100"/> </div>
        <input name="" type="submit" value="Submit">
	</form>
	<!-- iframe donde envia el formulario -->
	<iframe src="about:blank" name="iframe_null" style="display:none">
</body>
</html>
 
 
<?php
 
 
///////////////UPLOADER-PHP.PHP//////////////////////////////////
 
foreach($_FILES['archivo']['tmp_name'] as $key => $tmp_name)
        {
            $file_name = $key.$_FILES['archivo']['name'][$key];
            $file_size =$_FILES['archivo']['size'][$key];
            $file_tmp =$_FILES['archivo']['tmp_name'][$key];
            $file_type=$_FILES['archivo']['type'][$key];
            move_uploaded_file($file_tmp,"imagenes_temporales/".time().$file_name);
        }
 
?>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar