Caricamento file AJAX con XMLHttpRequest

So che ci sono molte domande simili, ma non ho ancora trovato una soluzione per il mio problema. Sto cercando di caricare un file con XMLHttpRequest, così ho sviluppato il codice qui sotto:

var sendFiles = function(url,onload,onerror,file,headers){ var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp'), upload = xhr.upload; API.addEvent(xhr,'readystatechange',function(){ if(xhr.readyState==4) if((xhr.status>=200 && xhr.status<300) || xhr.status==304){ this.response = this.response || this.responseText; onload.call(xhr); }else onerror.call(xhr); }); xhr.open('POST',url,true); for(var n=0;n<headers.length;n++) xhr.setRequestHeader(headers[n]); xhr.send(file); return xhr; }; 

E lo script PHP-side è:

 ; 

Ma var $ _FILES [‘file’] sembra essere vuoto, il che significa che il file non viene inviato al server. Quindi ho deciso di utilizzare l’object FormData, nel codice sottostante

 var sendFiles = function(url,onload,onerror,file,headers){ var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHttp'), upload = xhr.upload, formData = new FormData(); formData.append('file',file); API.addEvent(xhr,'readystatechange',function(){ if(xhr.readyState==4) if((xhr.status>=200 && xhr.status<300) || xhr.status==304){ this.response = this.response || this.responseText; onload.call(xhr); }else onerror.call(xhr); }); xhr.open('POST',url,true); for(var n=0;n<headers.length;n++) xhr.setRequestHeader(headers[n]); xhr.send(formData); return xhr; }; 

E ha funzionato, ma solo con dimensioni di file basse a circa 8 MB. Quando provo a inviare un file che ha più di 8mb di dimensione, la variabile $_FILES['file'] diventa nuovamente vuota

NOTA: il file ‘var’ corrisponde a qualcosa come document.getElementsById (‘fileInput’). Files [0];

Per evitare il problema di limitazione post_max_size … ma anche problemi di memoria su entrambi i lati:

Dal lato del cliente

  • usa PUT invece di POST:

    xhr.open("put", "upload.php", true);

  • aggiungi intestazioni personalizzate per specificare FileName e FileSize originali:

    xhr.setRequestHeader("X-File-Name", file.name);
    xhr.setRequestHeader("X-File-Size", file.size);

  • usa l’object File direttamente nel tuo metodo di invio XHR:

    xhr.send(file);

    Si noti che l’object File può essere ottenuto direttamente tramite la proprietà “files” dell’object DOM [type = file] di input

Sul lato server

  • leggi le intestazioni personalizzate tramite $ _SERVER:

    $filename = $_SERVER['HTTP_X_FILE_NAME'];
    $filesize = $_SERVER['HTTP_X_FILE_SIZE'];

  • leggere i dati del file usando php: // input:

    $in = fopen('php://input','r');

Sarai quindi in grado di inviare file molto grandi (1 GB o più) senza alcuna limitazione !!!

Questo codice funziona per FireFox 4+, Chrome 6+, IE10 +

Modificare la direttiva post_max_size nel file ini

La chiamata Ajax non limiterà la dimensione. Probabilmente è la dimensione massima del file nel file php ini.