Quiero cargar un archivo a través de XMLHttpRequest. He buscado ejemplos en todas partes y he encontrado bastantes. Pero no puedo averiguar qué es lo que estoy haciendo mal. Este es mi codigo. La función se activa cuando se presiona un botón. No envuelto en etiquetas

function upl_kost() {
var url = "proces_data.php?ref=upload_kost";
var hr;
var file = document.getElementById("file_kost");
var formData = new FormData();

formData.append("upload", file.files[0]);

if (window.XMLHttpRequest) {
    hr=new XMLHttpRequest();
  } else {
    hr=new ActiveXObject("Microsoft.XMLHTTP");
  }
hr.open("POST", url, true);

hr.setRequestHeader("Content-type", "multipart/form-data");

hr.onreadystatechange = function() {
   if(hr.readyState == 4 && hr.status == 200) {
        var return_data = hr.responseText;
        alert(return_data);
    }
}
hr.send(formData);
}

Y esta función lo atrapa.

if($_GET['ref'] == 'upload_kost') {
var_dump($_FILES);
}

Mi problema es que $ _FILES permanece vacío. Cuando miro la variable file.files en el js, se carga con los datos del archivo que estoy tratando de cargar.

¡Gracias!

0
Jaap115 30 ago. 2014 a las 20:32

2 respuestas

La mejor respuesta

Reduzca su JavaScript al mínimo requerido para esto, luego agregue algunos mensajes útiles que puede buscar en su consola

function upl_kost() {
    var xhr = new XMLHttpRequest(),
        url = 'proces_data.php?ref=upload_kost',
        fd = new FormData(),
        elm = document.getElementById('file_kost');

    // debug <input>
    if (!elm)
        console.warn('Element not found');
    else if (!(elm instanceof HTMLInputElement))
        console.warn('Element not an <input>');
    else if (!elm.files || elm.files.length === 0)
        console.warn('<input> has no files');
    else
        console.info('<input> looks okay');
    // end debug <input>

    fd.append('upload', elm.files[0]);

    xhr.addEventListener('load', function () {
        console.log('Response:', this.responseText);
    });

    xhr.open('POST', url);
    xhr.send(fd);
}

Si todavía tiene un problema, puede ser del lado del servidor, p. ¿Está realizando una redirección antes de intentar acceder a $_FILES?

0
Paul S. 30 ago. 2014 a las 16:58

Su problema es que está configurando el tipo de contenido de la solicitud

hr.setRequestHeader("Content-type", "multipart/form-data");

Si alguna vez vio una publicación multiparte / datos de formulario, notará que el encabezado del tipo de contenido tiene un límite

Content-Type: multipart/form-data; boundary=----webko2354645675756

Que falta en su código.
Si no configura el encabezado del tipo de contenido, el navegador lo configurará correctamente y el límite requerido. Esto permitirá que el servidor analice correctamente el cuerpo de la solicitud.

0
Musa 31 ago. 2014 a las 02:35