[SOLUCIONADO] Subir imagen sin recargar

oskarczo · #1 (**permalink**) 19/06/2013, 12:14

Poseo un problema con mi codigo y agradeceria ayuda para corregir este.
Lo que se supone que debe hacer es cargar una imagen sin tener recargar la pagina, utilize jqery para acceder a la funcion .ajax y php es el que realiza el guardado y la muestra de la imagen.
Este es el codigo de la pagina.html

Código HTML:

<!-- Subir multiples archivos -->
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="eje3.js"></script>
</head>
<body>

	Seleccione una imagen:<input type="file" name="foto" id="nu"><br>
	
	<input type="button" href="javascript:;" onclick="proceso($('#nu').val());return false;" value="Calcula"/>
	
	<div id="resultados"></div>

</body>
</html>

Esta es la de la funcion con jquery (funcion.js)

Código Javascript:

Ver originalvar x=$("#nu").attr("name");
function proceso(n){
    
var numero = {"valor":x};
 
    $.ajax({
           async:true,
           type: "POST",
           dataType: "html",
           contentType: "application/x-www-form-urlencoded",
           url:"eje3.php",
           data:numero,
           beforeSend:function () {
        $("#resultados").html("Procesando, espere por favor...");
        },
           success:function (datos) {
        $("#resultados").html(datos);
        },
           timeout:4000,
       
         }); 
  return false;
 
 
}

y Esta es la pagina php que realiza el guardado y muestra la imagen subida (eje3.php)

Código PHP:

Ver original<?php
 
 
//------------------
if ($_FILES['valor']['tmp_name']!="")
{
  copy($_FILES['valor']['tmp_name'],$_FILES['valor']['name']);
  $nom=$_FILES['valor']['name'];
 
 //filtrar por extencion :P inicio
    $archivo = $nom; 
    $trozos = explode(".", $archivo); 
    $extension = end($trozos); 
    echo "La extensión del archivo es: $extension"."<br>";  
// fin
$j="jpg";
$png="png";
$jpeg="jpeg";
 
  if($extension==$j || $extension==$png || $extension==$jpeg){ 
    echo "<img src=\"$nom\">";
  }else{
    echo "No es una Imagen ";
    }
}  
 
?>

Lo que sucede es que no me realiza esto, simplemente dice "procesando por favor espere" el mensaje antes de subir, pero deresto nada, no sube ni mucho menos guarda
quiziera saber que parte tengo mal, o si estoy haciendo todo esto mal.
Gracias :D

jonni09lo · #2 (**permalink**) 19/06/2013, 13:24

Usa este plugin ya que solo con ajax no puedes subir archivos

Saludos

Nemutagk · #3 (**permalink**) 19/06/2013, 13:34

Te das cuenta que estas en un foro de PHP?, todo lo que estas haciendo es en javascript, publica en el foro adecuado!

Eso jamas funcionará, no se de donde has sacado dicho código, pero no puedes enviar un archivo como lo estas haciendo, en todo caso primero debes leer el archivo con javascript y obtener el binario y luego pasar el binario al objeto ajax para ser subido, el problema es que no se puede hacer en todos los navegadores ya que necesitas 2 objetos (clases) propias de HTML 5 para lograrlo...

Busca información sobre FileReader() y FormData() para poder realizar un upload vía ajax, por ultimo, ten en cuenta que ambas clases no son soportadas aún por la mayoría de navegadores...

oskarczo · #4 (**permalink**) 19/06/2013, 21:17

Cita:

Iniciado por jonni09lo

Usa este [URL="http://www.malsup.com/jquery/form/"]plugin[/URL] ya que solo con ajax no puedes subir archivos

Saludos

Vale gracias por la la info, voy a intentar con ese codigo.

oskarczo · #5 (**permalink**) 19/06/2013, 21:20

Cita:

Iniciado por Nemutagk

Te das cuenta que estas en un foro de PHP?, todo lo que estas haciendo es en javascript, publica en el foro adecuado!

Eso jamas funcionará, no se de donde has sacado dicho código, pero no puedes enviar un archivo como lo estas haciendo, en todo caso primero debes leer el archivo con javascript y obtener el binario y luego pasar el binario al objeto ajax para ser subido, el problema es que no se puede hacer en todos los navegadores ya que necesitas 2 objetos (clases) propias de HTML 5 para lograrlo...

Busca información sobre FileReader() y FormData() para poder realizar un upload vía ajax, por ultimo, ten en cuenta que ambas clases no son soportadas aún por la mayoría de navegadores...

Gracias por la correcion, el codigo yo lo fui creando a base de lo que sabia, se que se pueden subir imagenes y archivos a php, ya lo he hecho, solo queria que subiera sin tener que recargar la pagina, para esto use jquery, que por lo que veo use mal. Sin embargo muchas gracias, y voy a intentar lo de las dos clases.

sonickseven · #6 (**permalink**) 19/06/2013, 22:24

olle amigo estas debuenas ja ja aj por que por ajax si se puede ahcer pues no precisamente ajax pero es javascript (es como lo mismo). Bueno te voy a subri un archivo donde esta como subirlo y como recivirlo bueno hay dos index e index1
tu prueba cual te sirve

http://www.mediafire.com/download/a7...uadm/Upload.7z

lsitos ese es

oskarczo · #7 (**permalink**) 20/06/2013, 06:12

Cita:

Iniciado por sonickseven

olle amigo estas debuenas ja ja aj por que por ajax si se puede ahcer pues no precisamente ajax pero es javascript (es como lo mismo). Bueno te voy a subri un archivo donde esta como subirlo y como recivirlo bueno hay dos index e index1
tu prueba cual te sirve

[url]http://www.mediafire.com/download/a7j45ddj2xzuadm/Upload.7z[/url]

lsitos ese es

Vale muchisimas gracias, este codigo me sirvio bastante, lo cambie solo para que me subiera una imagen ya que era eso lo que queria, sin embargo fue un gran aporte muchas gracias :D

oskarczo · #8 (**permalink**) 20/06/2013, 06:13

Cita:

Iniciado por oskarczo

Vale gracias por la la info, voy a intentar con ese codigo.

EL plugin me sirvio, gracias es mas grafico y se puede implemtentar para varios archivos, gracias por la info de nuevo :P