Caricamento di file utilizzando AJAX senza FormData (IE9)

Question

In IE9, FormData non è supportato, il che rende molto meno banale il caricamento dei file utilizzando XMLHttpRequest.

Questo può essere fatto? Ho visto iFrames menzionati e, anche se non sono contrario a scrivere un codice peloso, non riesco a capire come ottenerlo (ci sono molte risorse che parlano di caricamento su un iFrame ma non su come ottenere il file dall'iFrame al server).

Utilizzando vaniglia JavaScript (senza librerie di terze parti), come si potrebbe caricare un file in modo asincrono senza l'uso di FormData?

Answer 1

Questo codice dovrebbe fare il trucco. Scusate è stato tanto tempo fa e ho pensato che anche IE9 potesse caricare usando XHR (dovrebbe, ma questa è l'opzione Iframe).

esegue le seguenti operazioni:

1. Aggiungere un input di un file alla tua pagina (può essere fatto anche in HTML)
2. Metti che di selezione dei file in una forma
3. aggiungere le credenziali alla forma
4. Invia il modulo all'iframe e utilizza la sua pagina come valore di ritorno.

fileSelection = document.createElement("div"); 
//create the file input 
fileSelection.browseSelect = document.createElement("input"); 
fileSelection.browseSelect.type = "file"; 
fileSelection.browseSelect.name = "file[]"; 
fileSelection.browseSelect.style.display = "block"; 
fileSelection.browseSelect.style.position = "absolute"; 
fileSelection.browseSelect.style.left = "50%"; 
fileSelection.browseSelect.style.top = "auto"; 
fileSelection.browseSelect.style.height = "36px"; 
fileSelection.browseSelect.style.width = "36px"; 
fileSelection.browseSelect.style.bottom = "0px"; 
fileSelection.browseSelect.style.margin = "0px 0px -1px 90px"; 
fileSelection.browseSelect.style.filter = "alpha(opacity=0)"; 
fileSelection.browseSelect.style.zIndex = 14; 

//Put a form in it. 
fileSelection.form = document.createElement("form"); 
fileSelection.form.method = "POST"; 
fileSelection.form.action = [url to server]; //put your own file upload handler here. 
fileSelection.form.enctype = "multipart/form-data"; 
fileSelection.form.encoding = "multipart/form-data"; 
fileSelection.appendChild(fileSelection.form); 
//Append the file input to the form. 
fileSelection.form.appendChild(fileSelection.browseSelect); 

document.body.appendChild(fileSelection); 

function doUploadObjectUpload() 
{ 
    var tempFrame = document.createElement("iframe"); 
    tempFrame.src = ""; 
    tempFrame.allowTransparancy = "true"; 
    tempFrame.style.display = "none"; 
    tempFrame.frameBorder = 0; 
    tempFrame.style.backgroundColor = "transparent"; 
    tempFrame.onload = followUpOnHTML4Upload.bind(this,tempFrame); 

    tempFrame.name = "tmpFrameUpload" 
    this.appendChild(tempFrame); 
    this.form.target = tempFrame.name; 
    this.form.name = "uploadForm"; 
    this.form.acceptCharset = "UTF-8" 

    //This is an example of a hidden input, used to pass extra vars to the server. Add more if you need them. 
    var tempNodePath = document.createElement("input"); 
    tempNodePath.type = "hidden"; 
    tempNodePath.value = [dir]; //if you want specify a target path. 
    tempNodePath.name = "filePath"; 
    this.form.insertBefore(tempNodePath, this.form.childNodes[0]); 

    this.form.submit(); 
} 

function followUpOnHTML4Upload(frameId) 
{ 
     //Here you can check the response that came back from the page. 
} 

PHP ad esempio memorizza i file nella $_FILES