Ajax + Php + Upload Archivos

[tunait]

Iniciado por at_elah

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.

Iniciado por at_elah

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.