subir imagenes con javascript

[dleal100]

hola foreos
alguien que sepa como subir un archivo con javascript y php ._.

pero que no sea con jquery, ni otra libreria ._.

yo lo estoy asiendo pero en javascript y ajax solo se pueden envair datos atrabes de post y ajax ._.

y en php necesito enviar datos para la bariable $_FILES['archivo'];

la verdad solo e logrado que me recoja la direccion del archivo ._.
si alguien save com aserlo?

[caricatos]

Hola:

No es necesario ninguna librería, tan solo debes enviar ese formulario, pero se puede simular que es con Ajax, usando un iframe oculto (o no)... Revisar las imágenes antes de subirlas.

Saludos

[jrevilla]

Lo mas simple, sin librerias.... USA SERVLETS pues, si quieres te pongo un ejemplo =)

[maycolalvarez]

Iniciado por jrevilla

Lo mas simple, sin librerias.... USA SERVLETS pues, si quieres te pongo un ejemplo =)

te recuerdo que los servlets de java se ejecutan en el servidor y no tienen incidencia alguna con el cliente, el objetivo de subir una imágen por AJAX es no recargar la página, y eso es trasparente para el servidor, solo puede gestionarse desde el cliente, en este caso con un iframe

[jrevilla]

a enserio.... bueno, pero creo q para eso hay varios JQuery cierto?

[maycolalvarez]

Iniciado por jrevilla

a enserio.... bueno, pero creo q para eso hay varios JQuery cierto?

jQuery es un FW javascript, cuyo objetivo es brindar una alternativa crossbrowser al javascript nativo del navegador, por lo tanto es parte del cliente WEB

AJAX es una técnica que se basa en enviar contenido al servidor (PHP, JSP/Servlets, ASP, etc) sin recargar la página, se basa prácticamente en el uso del XmlHttpRequest que es un objeto en Javascript que permite enviar request HTTP y recibir la respuesta del server, brindando posibilidad de hacer webs interactivas (la llamada WEB 2.0), a lo sumo como técnica AJAX puede ser implementado de otros medios como un iframe.

lo ideal es que comprendas el concepto de la tecnología web, o mejor dicho los principios de las aplicaciones Cliente/Servidor y como interactuar con las mismas en el desarrollo de webs: estáticas, dinámicas o interactivas.

[dleal100]

gracias por su ayuda

pero no quiero usar jquery, o ningun plugin que tenga que depender del jquery
y tampoco quiero usar frames ya que ala hor ed validar el codigo es probable que me tiere muchos errores, tambien en caso de que falle el servidor no quiero ver ese cuadro que aparece cuando no hay internet en el frame :s

LOS FRAMES SON LA PEOR SOLUCION

y SERVLETS nose que sea jejeje ._.
jrevilla si gustas ponerme un ejemplo gracias XDD

NADAMAS QUE NO SE PROGRAMAR EN JAVA ._.

[maycolalvarez]

Iniciado por dleal100

gracias por su ayuda

pero no quiero usar jquery, o ningun plugin que tenga que depender del jquery
y tampoco quiero usar frames ya que ala hor ed validar el codigo es probable que me tiere muchos errores, tambien en caso de que falle el servidor no quiero ver ese cuadro que aparece cuando no hay internet en el frame :s

LOS FRAMES SON LA PEOR SOLUCION

y SERVLETS nose que sea jejeje ._.
jrevilla si gustas ponerme un ejemplo gracias XDD

NADAMAS QUE NO SE PROGRAMAR EN JAVA ._.

hablamos de <<"iframe">> no de frames/frameset, y por muy obsoletos que estén los framesets (no los iframes) nada tienen que ver con errores al tratar URL y errores HTTP 404.

y sí, la unica forma de emular un ajax upload es con un iframe, la cual es mucho más compatible en cuanto a navegadores que los plugins con flash, apples e incluso HTML5 File Api

[Artificium]

Mira, si quieres estar en estos asuntos debes entender las cosas con precisión y no formarte prejuicios o dogmas con respecto a la tecnología que usas. Cuál es el problema con los frames o iframes? por qué no se recomienda su uso. Pues te diré, entre otras cosas porque los buscadores no pueden relacionar su contenido con el contenido de los otros frames. Este no es el caso no? Entonces no hay ningún problema, porque solo lo usarás para cargar un archivo. No habrá nada de contenido porque estará oculto. Aquí hay algo que te puede dar algunas luces al respecto:

http://www.forosdelweb.com/f4/cargar...iframe-304182/

Espero que te sirva.

[dleal100]

ya me lo sospechava ._.
entocnes nadie save .-.

Iniciado por Artificium

Mira, si quieres estar en estos asuntos debes entender las cosas con precisión y no formarte prejuicios o dogmas con respecto a la tecnología que usas. Cuál es el problema con los frames o iframes? por qué no se recomienda su uso. Pues te diré, entre otras cosas porque los buscadores no pueden relacionar su contenido con el contenido de los otros frames. Este no es el caso no? Entonces no hay ningún problema, porque solo lo usarás para cargar un archivo. No habrá nada de contenido porque estará oculto. Aquí hay algo que te puede dar algunas luces al respecto:

[url]http://www.forosdelweb.com/f4/cargar-archivo-iframe-304182/[/url]

Espero que te sirva.

bueno mi web esta en XHTML de transitional si uviera querido usar iframes uviera usado la opcion de frameset.dtd

[Artificium]

Si, nadie sabía (con B labial) que usabas XHTML de transitional y no veo la razón por la cual no puedas cambiarlo a frameset, ahora, hay otra alternativa, pero por lo pronto varios navegadores no lo soportarían. Creo que ya te la recomendaron.

[maycolalvarez]

Iniciado por dleal100

ya me lo sospechava ._.
entocnes nadie save .-.



bueno mi web esta en XHTML de transitional si uviera querido usar iframes uviera usado la opcion de frameset.dtd

¿sabes la diferencia entre un iframe y frameset?, para empezar un iframe NO necesita un frameset, son 2 cosas distintas, y si no quieres usar iframes no te quedan más opciones que flash, applets o HTML5 FileAPI, porque entiende: javascript NO tiene acceso al IO

[Artificium]

Iniciado por Artificium

Si, nadie sabía (con B labial) que usabas XHTML de transitional y no veo la razón por la cual no puedas cambiarlo a frameset, ahora, hay otra alternativa, pero por lo pronto varios navegadores no lo soportarían. Creo que ya te la recomendaron.

Sorry, no sabía que el uso de iframes no necesitaba un doctype frameset.

[maycolalvarez]

Iniciado por Artificium

Sorry, no sabía que el uso de iframes no necesitaba un doctype frameset.

no necesariamente, en el estándar XHTML 1.1 strict no se recomienda su uso, en cambio se sustituye con "object":

Código HTML:

<object id="page" type="text/html" data="page.htm" width="500" height="600"> 
  <p>Oops! That didn't work...</p> 
</object>
 

fuente:

http://stackoverflow.com/questions/1...-we-use-iframe
http://www.w3.org/TR/REC-html40/stru...ts.html#h-13.5

pero en escencia es un iframe, no un frameset

[caricatos]

Hola:

No sé porqué, parece que no has leído el artículo del enlace que puse...

Saludos

[dleal100]

Iniciado por caricatos

Hola:

No sé porqué, parece que no has leído el artículo del enlace que puse...

Saludos

jajaja si probe tu link :s
y esa cosa usa sessiones :s
y tambien usa frames detodas formas ya me cance ._.

boy a subir archivos con simple php ._.

PD: aca les dejo lo que yebaba de mi codigo esque no puedo enviar el $_FILES['archivo']['tmp_name'] por ajax ._. intente enviarlo por el POST pero no pude aca les dejo lo que yevava ._. por si alguien logra aserlo ._.

Código:

<html>
<head>
<script type="text/javascript">
function yo(file) {
var mostrar=document.getElementById("mostrar");
var caca= document.getElementById("caca");
caca.innerHTML= file+"<br /><img src='file:///"+file+"'>";

if(window.XMLHttpRequest)
{var u= new XMLHttpRequest();}
else{var u= new ActiveXObject("Microsoft.XMLHTTP");}

u.onreadystatechange=function(){

if(u.readyState==4 && u.status==200)
{mostrar.innerHTML=u.responseText;}
else{mostrar.innerHTML="<h1>Cargando...</h1>";}//mensaje cargando :3
}
u.open("POST","imagen_user.php", true); //aca envias los datos a imagen_user.php
u.setRequestHeader("Content-type","application/x-www-form-urlencoded");
u.send("archivo="+file);


}
</script>
</head>
<body>
<div id="mostrar"></div>
<div id="caca" style='background-color:#CCC; width:300px; height:300px;'></div>
Copiar dentro del tag BODY 
<form method="post" name="upform" action="cgi-bin/tu-script.cgi"
enctype="multipart/form-data">
<p><input type="file" name="archivo"> <input type="button" name="Submit" value="Enviar"
onclick="yo(form.archivo.value)"> </p>
</form>


</body>
</html>

Código:

<?php
//lo guardan como imagen_user.php
if($_FILES['archivo']['tmp_name']!=""){
echo $tmp=$_FILES['archivo']['tmp_name'];
}
else{echo $tmp=$_POST["archivo"];}


$nombre= date("DMYgis").$_FILES['archivo']['name']; //sobreescribimos el nombre de la imagen
$separador=explode(".",$nombre); //separamos el nombre de la imagen
$solo_nombre=$separador[0]; //nombre de la imagen
$extension=$separador[1]; //extencion ejemplo jpg, gif, png, etc...


if(move_uploaded_file($tmp,"imagenes/$nombre")) //movemos la imagen asia la carpeta que se llama "user"
{
echo "la imagen se suvio con exito";
}
else{echo "error al guardar la imagen";}

?>

[caricatos]

Hola:

Verás, las sesiones solo sirven para mostrar la imagen, pero si solo quieres subir la imagen no es necesario.

...Y viendo tu código, parece que no te has enterado que los objetos Ajax no sirven de nada (XMLHttpRequest)... Intentaré poner el código necesario en pocas líneas...

Código:

<form action="imagen_user.php" method="post" target="ventana" enctype="multipart/form-data" >
<input type="file" name="archivo" />
<button type="submit" >subir</button>
</form>
<iframe name="ventana" style="display: none" ></iframe>

Con esas pocas líneas envías el fichero a un iframe oculto (lo que puse al principio)... luego, si no quieres el botón debes programar el evento change del control file...

Código:

onchange="this.form.submit()"

Saludos

[Artificium]

Hasta ahora no entiendo porque sigues negándote a usar un iframe que no es lo mismo que frame y que tu doctype si funciona. Cual es el problema con el iframe ahora?

[maycolalvarez]

Iniciado por Artificium

Hasta ahora no entiendo porque sigues negándote a usar un iframe que no es lo mismo que frame y que tu doctype si funciona. Cual es el problema con el iframe ahora?

es caso perdido amigo, no malgastemos más tiempo tratando de que entienda que un iframe no es un frame, no se le pueden pedir peras al olmo

[dleal100]

bueno pues despues de casi 3 dias :s
esta fue la solucion tuve que usar iframes e_e
lo que luego se me ase raro es que en las librerias que dependen de jquery no usen iframes, o almenos que añadan nodos de iframes en nuestro docuemnto web y no nosdemos cuentas,

sigo pensando que se puede aser sin iframes, pero mis conocimientos no dan para mas...

bueno aca les dejo la solucion por si alguien le interesa :S

Código:

<?php
//Directorio donde se va almacenar la img o archivo.
$upload_dir = "imagenes";
if (isset($_POST['fileframe'])){
   $result = 'ERROR';
 
if (isset($_FILES['file'])){
if ($_FILES['file']['error'] == UPLOAD_ERR_OK){
 
//Obteniendo el nombre del archivo
$filename = date("DMYgis").$_FILES['file']['name'];
 
//Moviendo el archivo al directorio indicado arriba
move_uploaded_file($_FILES['file']['tmp_name'], $upload_dir.'/'.$filename);
 
//Cambiando el status del result
$result = 'OK';
}
}
 
echo '<html><head></head><body>';
echo '<script type="text/javascript">'."\n";
echo 'var Doc = window.parent.document;';
 
if ($result == 'OK'){
   //Asignando los valores a los distintos input
   echo 'Doc.getElementById("status").innerHTML = "El Archivo ha sido cargado...";';
   echo 'Doc.getElementById("img").src="'.$upload_dir.'/'.$filename.'";';
}
else{
   echo 'Doc.getElementById("status").innerHTML = "ERROR al Subir Archivo";';
}
 
echo "\n".'</script></body></html>';
 
exit();
}
?>
 
<!-- Inicio de la página principal -->
<html><head>
<title>Subir Archivo con PHP y AJAX</title>
<script type="text/javascript">
function subirArchivo(upload_field){
   //Aqui se puede agregar otras extensiones...
   var re_text = /\.gif|\.jpg|\.png/i;
   var filename = upload_field.value;
 
   // Verificando que el tipo.
   if (filename.search(re_text) == -1){
      alert("El archivo no es de tipo(.jpg, .png) extension ");
      upload_field.form.reset();
      return false;
}
 
   upload_field.form.submit();
   document.getElementById('status').innerHTML = "Subiendo Archivo...";
   return true;
}
</script>

</head>
<body>

<!--Aqui podemos colocar una imagen por defecto-->
<img id="img" src="" width="128"/>
 
<form action="#" target="upload_iframe" method="post" enctype="multipart/form-data">
<input type="hidden" name="fileframe" value="true">
<input type="file" name="file" id="file" onChange="subirArchivo(this)">
</form>
 

<iframe name="upload_iframe" style="width: 400px; height: 100px; display:none;"></iframe>
 
Status:<div id="status"></div>


</body>
</html>

[caricatos]

Hola:

Iniciado por dleal100

...sigo pensando que se puede aser sin iframes, pero mis conocimientos no dan para mas...

Verás, Ajax no permite el enctype para subir archivos (enctype -> setRequestHeader), y de los datos, sea el método que sea, se envían los contenidos... y ¿cómo crees que javascript puede conocer los bytes de un archivo...?

No entiendo del código, las líneas: return true/false...

Saludos