Przesyłanie plików przy użyciu AJAX bez FormData (IE9)

Question

W IE9, FormData nie jest obsługiwany, co sprawia, że ​​przesyłanie plików przy użyciu XMLHttpRequest jest znacznie mniej banalne.

Czy to można zrobić? Widziałem już wspomnienia iFrames i chociaż nie jestem przeciwny napisaniu jakiegoś owłosionego kodu, nie mam pojęcia, jak to osiągnąć (wiele zasobów mówi o przesyłaniu do iFrame, ale nie o tym, jak zdobyć plik z iFrame na serwer).

Korzystanie z vanilla JavaScript (bez bibliotek stron trzecich), w jaki sposób jeden plik zostałby przesłany asynchronicznie bez użycia numeru FormData?

Answer 1

Ten kod powinien wystarczyć. Niestety było dawno temu i myślałem, że IE9 również może przesłać za pomocą XHR (powinno, ale jest to opcja iframe).

Czyni następujące:

1. Dodaj wejście plik na swojej stronie (można również wykonać w HTML)
2. Odłóż ten selektor plików w formie
3. dodać poświadczenia do formularza
4. Prześlij formularz do elementu iframe i użyj jego strony jako wartości zwracanej.

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 na przykład będzie przechowywać pliki w $_FILES