Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Ajax + Php + Upload Archivos

Estas en el tema de Ajax + Php + Upload Archivos en el foro de Frameworks JS en Foros del Web. Bueno aqui os traigo una duda... alguien se ha planteado como hacer el upload de archivos ($_FILES o como sea) usando ajax en php? el ...

  #1 (permalink)  
Antiguo 07/09/2006, 05:02
 
Fecha de Ingreso: noviembre-2005
Mensajes: 3
Antigüedad: 12 años, 8 meses
Puntos: 0
Ajax + Php + Upload Archivos

Bueno aqui os traigo una duda... alguien se ha planteado como hacer el upload de archivos ($_FILES o como sea) usando ajax en php? el POST hace tiempo que esta controlado pero el upload....

gracias de antemano
  #2 (permalink)  
Antiguo 10/09/2006, 19:37
 
Fecha de Ingreso: septiembre-2006
Mensajes: 21
Antigüedad: 11 años, 10 meses
Puntos: 0
Usa la librería Curl en php. Yo la he probado sin tener que instalar ningún paquete. Busca en la web sobre Curl y verás.

-Te permite ftp, http, ssl, https, ..
-Te permite monitorear el tamaño del archivo, tiempo transcurrido, media de subida o bajada
...

busca por curl_open(), ya que de primeras encontré para trabajar con un programa de descarga estilo wget en linea de comandos, pero hay funciones para integrar en php y yo no he tenido que cargar ninguna clase en el código php.

Por cierto, he visto una aplicacion para upload de archivos con barra de progreso en Ruby of Rails que queda muy bien y tiene muy poco código.
  #3 (permalink)  
Antiguo 11/09/2006, 10:29
 
Fecha de Ingreso: junio-2005
Ubicación: Madrid, España
Mensajes: 288
Antigüedad: 13 años
Puntos: 1
Esa duda ya la han planteado muchas veces, y la respuesta es que no se puede, hay varias solciones que general el mismo efecto, normalmente usando iframes, para subir el fichero y ajax para mostrar una barra de progreso.
  #4 (permalink)  
Antiguo 12/09/2006, 10:31
 
Fecha de Ingreso: septiembre-2006
Mensajes: 21
Antigüedad: 11 años, 10 meses
Puntos: 0
aqui tienes un ejemplo

obokaman.obolog.com/mensaje/1596

que incluye código fuente.
  #5 (permalink)  
Antiguo 14/09/2006, 13:11
 
Fecha de Ingreso: septiembre-2006
Mensajes: 37
Antigüedad: 11 años, 10 meses
Puntos: 0
Cita:
Iniciado por zekenet Ver Mensaje
Esa duda ya la han planteado muchas veces, y la respuesta es que no se puede, hay varias solciones que general el mismo efecto, normalmente usando iframes, para subir el fichero y ajax para mostrar una barra de progreso.
Por lo que yo veo no es nada imposible, de echo gmail lo hace :?
  #6 (permalink)  
Antiguo 14/09/2006, 13:19
foo
 
Fecha de Ingreso: febrero-2006
Mensajes: 278
Antigüedad: 12 años, 5 meses
Puntos: 0
Cita:
Iniciado por at_elah Ver Mensaje
Por lo que yo veo no es nada imposible, de echo gmail lo hace :?
estas seguro que lo hace de la forma que imaginas?
  #7 (permalink)  
Antiguo 14/09/2006, 13:28
 
Fecha de Ingreso: septiembre-2006
Mensajes: 37
Antigüedad: 11 años, 10 meses
Puntos: 0
Cita:
Iniciado por foo Ver Mensaje
estas seguro que lo hace de la forma que imaginas?
ja, no se, dejame que hoy lo veo y te digo, pero imposible seguro que no es
  #8 (permalink)  
Antiguo 14/09/2006, 13:50
foo
 
Fecha de Ingreso: febrero-2006
Mensajes: 278
Antigüedad: 12 años, 5 meses
Puntos: 0
Cita:
Iniciado por at_elah Ver Mensaje
ja, no se, dejame que hoy lo veo y te digo, pero imposible seguro que no es
el punto no es que sea posible o imposible..., sino que para subir un archivo es necesario cumplir con una serie de cosas que establece el protocolo http para tal objetivo, ahora si en el futuro los desarrolladores brindan una manera de acceder a esa funcionalidad del navegador desde javascript, entonces recién se podrá subir archivos con ajax
  #9 (permalink)  
Antiguo 14/09/2006, 14:44
 
Fecha de Ingreso: septiembre-2006
Mensajes: 37
Antigüedad: 11 años, 10 meses
Puntos: 0
Cita:
Iniciado por foo Ver Mensaje
el punto no es que sea posible o imposible..., sino que para subir un archivo es necesario cumplir con una serie de cosas que establece el protocolo http para tal objetivo, ahora si en el futuro los desarrolladores brindan una manera de acceder a esa funcionalidad del navegador desde javascript, entonces recién se podrá subir archivos con ajax

bien, pero la palabra imposible es determinante, y no permite analisis, lo mio solo fue una respuesta a zekenet. y doy como ejemplo el upload de gmail
  #10 (permalink)  
Antiguo 14/09/2006, 15:05
foo
 
Fecha de Ingreso: febrero-2006
Mensajes: 278
Antigüedad: 12 años, 5 meses
Puntos: 0
Cita:
Iniciado por at_elah Ver Mensaje
bien, pero la palabra imposible es determinante, y no permite analisis, lo mio solo fue una respuesta a zekenet. y doy como ejemplo el upload de gmail
tienes razon, pero si lees nuevamente mis mensajes, en ningun momento dije que fuera imposible (quien sabe si en un futuro se pueda subir o no archivos de esa forma), inicialmente solo te pregunte si realmente sabias como hacia el "upload" gmail.
  #11 (permalink)  
Antiguo 14/09/2006, 16:12
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 10 meses
Puntos: 381
Cita:
Iniciado por at_elah Ver Mensaje
Por lo que yo veo no es nada imposible, de echo gmail lo hace :?
Depende de si el uso de un iframe oculto en vez del uso del objeto xmlhttprequest se considera o no ajax. Lo que sí es cierto es que el objeto xmlhttprequest no puede manejar archivos. Google por mucho que use ajax no puede tampoco realizar upload de archivos usando el objeto xmlhttprequest por muy google que sea.

saludos
  #12 (permalink)  
Antiguo 14/09/2006, 17:20
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 14 años
Puntos: 4
gmail no es la gran cosa, no le veo tanto ajax que digamos, me recarga la pagina cada vez que hago click en algun link del menu izquierdo. por empezar tiene 15 iframes, lo pueden ver si tienen el html validator para firefox.
__________________
Internet Explorer SuckS
Download FireFox
  #13 (permalink)  
Antiguo 14/09/2006, 18:15
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 14 años, 4 meses
Puntos: 4
Este script lo saque de una clase de PHPClass y le hice un par de modificaciones.
Aca dejo el sistema funcionando http://retrofox.com.ar/ajaxfileuploader/

Consta de 4 Archivos:

la clase AjaxFileUploader.inc.php
Código PHP:
<?php
    
class AjaxFileuploader {
        
        
// PHP 4.x users replace "PRIVATE" from the following lines with VAR
        
var $uploadDirectory '';
        var 
$uploaderIdArray = array();
        
        
/**
         * Constructor Function
         * 
         */
        
function AjaxFileuploader($uploadDirectory) {
            
            if (
trim($uploadDirectory) != '' && is_dir($uploadDirectory))
                
$this->uploadDirectory $uploadDirectory;
            else
                die(
"<b>ERROR:</b> No Se puede abrir el directorio: $uploadDirectory");
        }
    
    
    
        
        
/**
        * Metodo que retorna un Array con todos los archivos en el uploadDir
        * @return array
        */
        
function scanDir() {
            
$returnArray = array();
            
            if (
$handle opendir($this->uploadDirectory)) {
               
                while (
false !== ($file readdir($handle))) {
                     if (
is_file($this->uploadDirectory."/".$file)) {
                         
$returnArray[] = $file;
                     }
                }
            
               
closedir($handle);
            }
            else {
                die(
"<b>ERROR: </b> No se puede leer el directorio <b>"$this->uploadDirectory.'</b>');
            }
            return 
$returnArray;            
        }


        
/**
         * Esta Funcion Retorna el formulario html para subir el archivo al server
         * @param string $uploaderId
         * @return string
         */
        
function showFileUploader($uploaderId) {
            if (
in_array($uploaderId$this->uploaderIdArray)) {
                die(
$uploaderId." already used. please choose another id.");
                return 
'';
            }
            else {
                
$this->uploaderIdArray[] = $uploaderId;
            
                return 
'<form id="formName'.$uploaderId.'" method="post" enctype="multipart/form-data" action="imageupload.php" target="iframe'.$uploaderId.'">
                            <input type="hidden" name="id" value="'
.$uploaderId.'" />
                            <span id="uploader'
.$uploaderId.'" style="font-family:verdana;font-size:10;">
                                Upload File: <input name="'
.$uploaderId.'" type="file" value="'.$uploaderId.'" onchange="return uploadFile(this)" />
                            </span>
                            <iframe name="iframe'
.$uploaderId.'" src="imageupload.php" width="400" height="100" style="display:none"> </iframe>
                        </form>'
;
            }
        }
    }
?>
Archivo de respuesta a la subida del archivo imageupload.php
Código PHP:
<?php
    
// Copia el archivo temporal al archivo en el server
    // en $dir se especifica directorio de escritura.
    
$dir 'archs/';
    if (isset(
$_POST['id'])) {
        if (!
copy($_FILES[$_POST['id']]['tmp_name'], 'archs/'.$_FILES[$_POST['id']]['name']))
            echo 
'<script> alert("Error al Subir el Archivo");</script>';
    }
    else
        echo 
"Archivo subido.";
?>
el index.php
Código PHP:
<html>
    <head>
        <title>AJAX File uploader</title>
        <script type="text/javascript" src="uploader.js" ></script>
    </head>
    <style>
    h3 {color: #F00}
    p {color: #00F; border: 1px solid #CCC; margin: 2px; padding: 2px;}
    </style>
    <body>
    
<?php
    
// Carpeta donde se guardan los archivos subido
    
$upDir "archs/";
    
    
//    Incluimos Clase
    
require_once("AjaxFileUploader.inc.php");
    
    
//    Creamos Objeto
    
$Archivo = new AjaxFileuploader($upDir);
    
    
// Escaneamos los archivos en el servidor
    
$archs $Archivo->scanDir();
    echo 
'<h3>Archivos Subidos</h3>';
    foreach (
$archs as $nombre_archivo)
        echo 
'<p>'.$upDir.'<b>'.$nombre_archivo.'</b></p>';
    
    
    echo 
'<br><br><p>Archivos a Subir</p>';
    
        
// Formulario de subida 1
        
echo $Archivo->showFileUploader('id1');

        
// Formulario de subida 2
        
echo $Archivo->showFileUploader('id2');
    
?>
    </body>
</html>
Y la rutina JavaScript uploader.js
Código PHP:
var http createRequestObject();
var 
uploader '';

function 
createRequestObject() {
    var 
obj;
    var 
browser navigator.appName;
    
    if(
browser == "Microsoft Internet Explorer"){
        
obj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        
obj = new XMLHttpRequest();
    }
    return 
obj;    
}

function 
traceUpload(uploadDir) {
         
   
http.onreadystatechange handleResponse;

   
http.open("GET"'imageupload.php?uploadDir='+uploadDir+'&uploader='+uploader); 
   
http.send(null);   
}

function 
handleResponse() {

    if(
http.readyState == 4){
        
document.getElementById(uploaderId).innerHTML http.responseText;
        
//window.location.reload(true);
    
}
    else {
        
document.getElementById(uploaderId).innerHTML "Uploading File. Please wait...";
    }
}

function 
uploadFile(obj) {
    var 
uploadDir obj.value;
    
uploaderId 'uploader'+obj.name;
    
uploader obj.name;
    
    
document.getElementById('formName'+obj.name).submit();
    
traceUpload(uploadDirobj.name);    

Tambien esta el directorio archs/ que es donde se suben los archivos.
__________________
| Cabeza De Raton |

Última edición por Calisco; 14/09/2006 a las 20:14 Razón: mal etiquetado los scripts
  #14 (permalink)  
Antiguo 14/09/2006, 18:17
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 14 años, 4 meses
Puntos: 4
Este es el link en PHPClass del autor de la clase original.
http://www.phpclasses.org/browse/pac...oad/targz.html

Ho le hice una moficacion a la funcion uploadFile (obj) para que solo pueda subir archivos .jpg. Mas que nada por el ejemplo, si no me pueden subir un .php al server.

Este es el codigo.
Código PHP:
function uploadFile(obj) {
    var 
uploadDir obj.value;
    
uploaderId 'uploader'+obj.name;
    
uploader obj.name;
    
    var 
trozos uploadDir.split ('/');
    var 
nmb_archivo trozos[trozos.length-1];

    var 
trozos nmb_archivo.split ('.');
    var 
extns trozos[trozos.length-1];

    if (
extns == 'jpg')
        {
        
document.getElementById('formName'+obj.name).submit();
        
traceUpload(uploadDirobj.name);    
        }
    else
        
alert ('ERROR: Solo se permite subir archivos de imagen tipo .jpg');

__________________
| Cabeza De Raton |

Última edición por Calisco; 14/09/2006 a las 20:17 Razón: mal tipeado por apuro ...
  #15 (permalink)  
Antiguo 14/09/2006, 20:21
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 14 años, 4 meses
Puntos: 4
Ahora tengo un problema ... y es que no se como puedo rescatar el valor de las variables del archivo $_FILE[archivo]['tmp_name'] o $_FILE [archivo]['name'].
Por ejemplo, esta linea:
Código PHP:
if (!copy($_FILES[$_POST['id']]['tmp_name'], 'archs/'.$_FILES[$_POST['id']]['name'])) 
En el script se encarga de copiar el archivo temporal a un nombre de archivo que queda alojado en el servidor.
Pero si yo hago:
Código PHP:
echo 'Nombre Temporal: '.$_FILES[$_POST['id']]['tmp_name']; 
no imprime nada. Alguien tiene alguna idea de lo que pasa ?
__________________
| Cabeza De Raton |
  #16 (permalink)  
Antiguo 15/09/2006, 07:20
 
Fecha de Ingreso: septiembre-2006
Mensajes: 37
Antigüedad: 11 años, 10 meses
Puntos: 0
Calisco sos un grande evitaste que la discusion creciera.

No es el echo de que gmail se la gran cosa, sino que le encontro la vuelta.
  #17 (permalink)  
Antiguo 15/09/2006, 07:27
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 14 años, 4 meses
Puntos: 4
Bueno, la idea es tratar de resolver como bosta puedo tomar el valor de las variables de $_FILES[][];
__________________
| Cabeza De Raton |
  #18 (permalink)  
Antiguo 15/09/2006, 07:27
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 10 meses
Puntos: 381
Cita:
Iniciado por at_elah Ver Mensaje
Calisco sos un grande evitaste que la discusion creciera.

No es el echo de que gmail se la gran cosa, sino que le encontro la vuelta.
disculpa pero ... ¿qué estás diciendo?

google está usando el mismo método que se estaba usando antes del uso de AJAX, osea que no le encontró la vuelta a nada.

Y los códigos que se han dejado en este tema usan todos un iframe, osea, no está usando lo que se considera ajax para enviar el archivo. ¿o acaso ni te has mirado el código fuente antes de dejar tu comentario?

Un saludo
  #19 (permalink)  
Antiguo 15/09/2006, 07:44
 
Fecha de Ingreso: septiembre-2006
Mensajes: 37
Antigüedad: 11 años, 10 meses
Puntos: 0
Cita:
Iniciado por tunait Ver Mensaje
disculpa pero ... ¿qué estás diciendo?

google está usando el mismo método que se estaba usando antes del uso de AJAX, osea que no le encontró la vuelta a nada.

Y los códigos que se han dejado en este tema usan todos un iframe, osea, no está usando lo que se considera ajax para enviar el archivo. ¿o acaso ni te has mirado el código fuente antes de dejar tu comentario?

Un saludo
no soy un erudito en ajax, si bien lo uso constantemente.

Pero de momento, que veo una llamada a una funcionq que envia los datos a una pagina alojada en el server para que este la procese y devuelva una respuesta (proceso en segundo plano), lo considero ajax dentro de lo que estamos hablando.

Código PHP:
var http createRequestObject();
var 
uploader '';
          
handleResponse
function createRequestObject() {
    var 
obj;
    var 
browser navigator.appName;
    
    if(
browser == "Microsoft Internet Explorer"){
        
obj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        
obj = new XMLHttpRequest();
    }
    return 
obj;    
}

function 
traceUpload(uploadDir) {
         
   
http.onreadystatechange handleResponse;

   
http.open("GET"'imageupload.php?uploadDir='+uploadDir+'&uploader='+uploader); 
   
http.send(null);   
}

function 
handleResponse() {

    if(
http.readyState == 4){
        
document.getElementById(uploaderId).innerHTML http.responseText;
        
//window.location.reload(true);
    
}
    else {
        
document.getElementById(uploaderId).innerHTML "Uploading File. Please wait...";
    }
}

function 
uploadFile(obj) {
    var 
uploadDir obj.value;
    
uploaderId 'uploader'+obj.name;
    
uploader obj.name;
    
    
document.getElementById('formName'+obj.name).submit();
    
traceUpload(uploadDirobj.name);    

  #20 (permalink)  
Antiguo 15/09/2006, 08:06
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 10 meses
Puntos: 381
Cita:
Iniciado por at_elah Ver Mensaje
no soy un erudito en ajax, si bien lo uso constantemente.

Pero de momento, que veo una llamada a una funcionq que envia los datos a una pagina alojada en el server para que este la procese y devuelva una respuesta (proceso en segundo plano), lo considero ajax dentro de lo que estamos hablando.
ok, si consideras que el uso de un iframe para trabajar en segundo plano sin usar el objeto xmlHttpRequest sea también ajax

Ahora bien, lo que en general se conoce (o vende) hoy como AJAX es realizar ese proceso en segundo plano usando el objeto xmlHttpRequest no se aplica al uso de un iframe para enviar información al servidor.

Si te fijas en el código que has citado no se está enviando información ni ningún archivo al servidor mediante ajax si no que está esperando la respuesta de éste tras haberse enviado el archivo con el submit tradicional de un formulario apuntando a un iframe.

Cita:
Iniciado por at_elah Ver Mensaje
Código:
var http = createRequestObject();
var uploader = '';
		  handleResponse
function createRequestObject() {
    var obj;
    var browser = navigator.appName;
    
    if(browser == "Microsoft Internet Explorer"){
        obj = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else{
        obj = new XMLHttpRequest();
    }
    return obj;    
}

function traceUpload(uploadDir) {
         
   http.onreadystatechange = handleResponse;

   http.open("GET", 'imageupload.php?uploadDir='+uploadDir+'&uploader='+uploader); 
   http.send(null);   
}

function handleResponse() {

    if(http.readyState == 4){
        document.getElementById(uploaderId).innerHTML = http.responseText;
        //window.location.reload(true);
    }
    else {
        document.getElementById(uploaderId).innerHTML = "Uploading File. Please wait...";
    }
}

function uploadFile(obj) {
    var uploadDir = obj.value;
    uploaderId = 'uploader'+obj.name;
    uploader = obj.name;
    
    document.getElementById('formName'+obj.name).submit();
    traceUpload(uploadDir, obj.name);    
}
Si te fijas está enviando un null al servidor con AJAX

http.open("GET", 'imageupload.php?uploadDir='+uploadDir+'&uploader= '+uploader);
http.send(null);


y está realizando un submit de un formulario

document.getElementById('formName'+obj.name).submi t();

y este formulario se escibe desde la clase AjaxFileuploader en su método showFileUploader($uploaderId) en donde devuelve un formulario

Código PHP:
return '<form id="formName'.$uploaderId.'" method="post" enctype="multipart/form-data" action="imageupload.php" target="iframe'.$uploaderId.'">
                            <input type="hidden" name="id" value="'
.$uploaderId.'" />
                            <span id="uploader'
.$uploaderId.'" style="font-family:verdana;font-size:10;">
                                Upload File: <input name="'
.$uploaderId.'" type="file" value="'.$uploaderId.'" onchange="return uploadFile(this)" />
                            </span>
                            <iframe name="iframe'
.$uploaderId.'" src="imageupload.php" width="400" height="100" style="display:none"> </iframe>
                        </form>'

...que es el que se encarga de enviar el archivo a través del iframe que está oculto

<form id="formName'.$uploaderId.'" method="post" enctype="multipart/form-data" action="imageupload.php" target="iframe'.$uploaderId.'">

Así que lo único que se está haciendo con ajax es recoger el resultado escrito por el servidor tras recoger el archivo enviado con el formulario a través del iframe, pero enviar con ajax no se está enviando nada.
  #21 (permalink)  
Antiguo 15/09/2006, 08:40
 
Fecha de Ingreso: septiembre-2006
Mensajes: 37
Antigüedad: 11 años, 10 meses
Puntos: 0
ufff, me cambiaste el concepto. Revisando las funciones que uso para procesar el ajax observo que la unica diferencia entre este codigo
Código PHP:
http.open("GET"'imageupload.php?uploadDir='+uploadDir+'&uploader= '+uploader);
http.send(null); 
y el que uso yo, es que envio un 3er parametro en http.open (true), pero siempre tengo http.send(null), aunque yo si uso el objeto xmlHttpRequest

Edito para agregar que tambien declaro onreadystatechange, para la funcion de respuesta
  #22 (permalink)  
Antiguo 15/09/2006, 13:39
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 10 meses
Puntos: 381
Cita:
Iniciado por Calisco Ver Mensaje
Ahora tengo un problema ... y es que no se como puedo rescatar el valor de las variables del archivo $_FILE[archivo]['tmp_name'] o $_FILE [archivo]['name'].
Por ejemplo, esta linea:
Código PHP:
if (!copy($_FILES[$_POST['id']]['tmp_name'], 'archs/'.$_FILES[$_POST['id']]['name'])) 
En el script se encarga de copiar el archivo temporal a un nombre de archivo que queda alojado en el servidor.
Pero si yo hago:
Código PHP:
echo 'Nombre Temporal: '.$_FILES[$_POST['id']]['tmp_name']; 
no imprime nada. Alguien tiene alguna idea de lo que pasa ?
He montado todo el tinglado este de archivos y me imprime sin problemas la línea que comentas
Código PHP:
echo 'Nombre Temporal: '.$_FILES[$_POST['id']]['tmp_name']; 
y me devuelve
Cita:
Nombre Temporal: C:\PHP\uploadtemp\phpC0.tmp
  #23 (permalink)  
Antiguo 16/09/2006, 07:25
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 14 años, 4 meses
Puntos: 4
Mira, yo acabo de modificar el script que hace la copia del archivo al servidor. Este es el codigo:
Código PHP:
<?php
    
//    Nombre de los Archivos
    
echo '<p>Nombre Temporal: '.$_FILES[$_POST['id']]['tmp_name'].'</p>';
    echo 
'<p>Nombre en el Server: '.$_FILES[$_POST['id']]['name'].'</p>';
    
    
// en $dir se especifica directorio de escritura.
    
$dir 'archs/';
    
    
// Copia el archivo temporal al archivo en el server
    
if (isset($_POST['id'])) {
        if (!
copy($_FILES[$_POST['id']]['tmp_name'], 'archs/'.$_FILES[$_POST['id']]['name']))
            echo 
'<script> alert("Error al Subir el Archivo");</script>';
    }
    else
        echo 
"Archivo subido.";
?>
.
No me funciona, y no se porque es ...
__________________
| Cabeza De Raton |

Última edición por Calisco; 16/09/2006 a las 07:43
  #24 (permalink)  
Antiguo 17/09/2006, 11:41
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 14 años, 4 meses
Puntos: 4
Luego de indagar e indagar ... tengo mis penosas ciertas conclusiones.

Como Funciona, a quien le pueda servir:

La carga del archivo al servidor lo hace a traves del Iframe Oculto. Aca NO se utiliza ajax en ningun momento. Simplemente la funcion uploadFile dispara el action del formulario mediante
Código PHP:
document.getElementById('formName'+obj.name).submit(); 
. Puro JS.

Dicha action esta definida en la clase php con el metodo showFileUploader($uploaderId) donde el formulario define
action="imageupload.php" target="iframe'.$uploaderId.'". Fijense que el script imageupload.php es cargado en el iFrame Oculto.

Luego, lo unico que hace AJAX es llamar a algun script de respuesta a todo este embrollo a traves de la funcion traceUpload(uploadDir, obj.name). Que en este caso vuelve a llamar al mismo imageupload.php y le pasa por URL algunos datos en la linea
Código PHP:
http.open("GET"'imageupload.php?uploadDir='+uploadDir+'&uploader='+uploader); 
. Podriamos haber puesto cualquier script .php.

Si eliminaramos la linea
Código PHP:
traceUpload(uploadDirobj.name); 
de la funcion fileupload podriamos seguir subiendo archivos sin ningun problema con la diferencia que no tendriamos ninguna respuesta en nuestro browser.

Entonces ..., no podia ver el valor de las variables de $_FILES porque la primera vez se muestran en el iFrame oculto. Y cuando AJAX llama por segunda vez el mismo script, ya los valores de $_FILES se han perdido porque el archivo ya se ha subido.

Recomiendo No utilizar este script como 'seguro'. Tiene varios errores y cosas que se podrian acomodar de una forma mas elegante y eficiente. No lo considero un buen ejemplo desde mi humilde opinion. Para entender el codigo me di cuenta que hay cosas que estan de mas, desordenadas, etc ...

Saludos.
__________________
| Cabeza De Raton |
  #25 (permalink)  
Antiguo 18/09/2006, 07:15
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 10 meses
Puntos: 381
El otro día cuando instalé el tinglado de esa clase saqué algunas conclusiones (ninguna buena) que por falta de tiempo no he podido comentar hasta ahora. Calisco, me has ahorrado teclear parte del asunto veo que también has visto lo que hay.

Pero el asunto va más allá, según mi opinión. Esta clase se define como upload con ajax cuando no usa ajax para realizar el upload y además el poco uso que hace de ajax es totalmente inutil y sólo confunde pues no trae ninguna información útil ni real.

En esta línea de uploader.js ...
Código:
function traceUpload(uploadDir) {
         
   http.onreadystatechange = handleResponse;

   http.open("GET", 'imageupload.php?uploadDir='+uploadDir+'&uploader='+uploader); 
   http.send(null);  
}
...está enviando unos párametros para nada. Si se quitan el script funciona exactamente igual

Código:
function traceUpload(uploadDir) {
         
   http.onreadystatechange = handleResponse;

   http.open("GET", 'imageupload.php'); 
   http.send(null);  
}
porque el archivo 'imageupload.php' sólo se encarga de recoger variables enviadas por el método POST y no por GET. En el caso de no encontrar algo concreto por POST devuelve siempre un ...
Código PHP:
else
        echo 
"Archivo subido."
Así que al enviar el objeto xmlHttpRequest esperando una respuesta recibe siempre la misma puesto que no se ha enviado nada por POST. En realidad el envío por POST se ha hecho al submitir el form a través del iframe pero es una petición distinta a la que hace ajax.

Así que aunque el archivo no se haya subido por algún error el ajax no se entera y sigue recibiendo de cualquier forma el mensaje "Archivo subido" (información errónea en realidad)

Cuando se envía el form y ocurre un error (el directorio no existe, por ejemplo) nos salta una alert() pero ese alert no es manejado por ajax, si no por el propio archivo imageupload.php desde el iframe (es el documento del iframe quien lanza el aviso). Sin embargo la parte manejada por ajax (la que no controla nada en realidad) nos escribe en el documento "Archivo subido" y nos quita el campo y lo da por bueno

Así el uso de onreadystatechange sólo sirve para lanzar una función que escribe lo que devuelve imageupload.php que es siempre el mismo mensaje cuando se debería, en todo caso, lanzar esa función desde el iframe que es el que de verdad está recogiendo el mensaje fijal (si se subió o no)

Así que en este uploader el uso de ajax es inutil e innecesario.

Analizo además otros detalles sin sentido:

¿por qué quitar el campo de archivo tras subir el archivo?
¿por qué la clase crea un form para cada campo y un iframe distinto para cada form + campo? se puede manejar todo desde un único iframe y no t ener que hacer tanto malabarismo con idés de formulario e idés de iframes.

Sería más lógico que se envíen los archivos a la vez con un único submit y que sea el usuario quien decida el momento de ser enviados (por ejemplo si seleccionó mal el archivo que quería no le da ocasión a rectificar).

En fin, que son montones de líneas que no sirven que crean un sistema poco usable y que engaña al "venderse" como un sistema ajax. Se puede hacer lo mismo sin necesidad de tanto lío.
  #26 (permalink)  
Antiguo 18/09/2006, 07:22
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 10 meses
Puntos: 381
...me olvidaba...

haz la prueba y pon visible el iframe y mira lo que sucede

Es decir, quita lo que pongo en negritas del código fuente

Código:
return '<form id="formName'.$uploaderId.'" method="post" enctype="multipart/form-data" action="imageupload.php" target="iframe'.$uploaderId.'"> 
                            <input type="hidden" name="id" value="'.$uploaderId.'" /> 
                            <span id="uploader'.$uploaderId.'" style="font-family:verdana;font-size:10;"> 
                                Upload File: <input name="'.$uploaderId.'" type="file" value="'.$uploaderId.'" onchange="return uploadFile(this)" /> 
                            </span> 
                            <iframe name="iframe'.$uploaderId.'" src="imageupload.php" width="400" height="100" style="display:none"> </iframe> 
                        </form>';
Eso es en AjaxFileUploader.inc.php en la función showFileUploader($uploaderId)

prueba a definir un directorio que no exista y observa lo que sucede
  #27 (permalink)  
Antiguo 18/09/2006, 07:28
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 14 años, 4 meses
Puntos: 4
sisisi, tal cual. Yo he estado depurando todo este codigo.
La idea es acomodarlo un poco ponerlo como ejemplo, ya que el original si bien funciona, colo confunde mas al que quiere aprender.
Saludos.
__________________
| Cabeza De Raton |
  #28 (permalink)  
Antiguo 25/09/2006, 16:15
 
Fecha de Ingreso: diciembre-2004
Mensajes: 37
Antigüedad: 13 años, 6 meses
Puntos: 0
De acuerdo Ok gracias por la ayuda

MMm.. Tenia el mismo inconveniente.. tenia una pagina que la llamo padre porque por ajax carga al resto (incluyendo el formulario) y cuando le decia al formulario enviar.. obviamente se salia de la pagina padre por aquello del action..

La idea q se espuso aqui me sirvio.. no es ajax.. pero logra un efecto similar.. ahh y ese codigo que pusieron.. valla que fue largo.. solo necesite 3 o 4 lineas de codigo y listo...me la complicaron.. pero aprendi..


Este es un muy buen post
  #29 (permalink)  
Antiguo 25/09/2006, 16:22
Avatar de Calisco  
Fecha de Ingreso: marzo-2004
Ubicación: Neuquen
Mensajes: 732
Antigüedad: 14 años, 4 meses
Puntos: 4
sisisi, es sencillito el codigo no mas ...
__________________
| Cabeza De Raton |
  #30 (permalink)  
Antiguo 09/01/2007, 01:54
 
Fecha de Ingreso: enero-2007
Mensajes: 1
Antigüedad: 11 años, 6 meses
Puntos: 0
De acuerdo Re: Ajax + Php + Upload Archivos

Bueno ah que les dejo una modificacion espero que les guste y le sirva mi primer aporte a la comunidad =D

usand capas con javascript desde el iframe usando "Parent"

bueno no me deja poner enlaces =(Junten todo)
Cita:
h t t p : / / mundojuegos . webspacemania . com / ajax_upload . zip


cualquier cosa :$ [email protected] jiji
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.
Tema Cerrado

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 14:28.