Uploading files using AJAX without FormData (IE9)

Question

In IE9, FormData is not supported, which makes uploading files using XMLHttpRequest a lot less trivial.

Can this be done? I've seen iFrames mentioned, and while I'm not opposed to writing some hairy code, I'm at a loss as to how to achieve this (there are many resources talking about uploading to an iFrame but not about how to get the file from the iFrame to the server).

Using vanilla JavaScript (no third party libraries), how would one upload a file asynchronously without the use of FormData?

The idea is that you post to your server via an iframe. There really is no AJAX involved. You can make it appear AJAX-like by hiding the iframe and returning some info to the client via the iframe when the file upload is complete (e.g. the file name and success-or-failure information). — BrianS, Dec 17 '14 at 19:40
since it's without FileReader (http://caniuse.com/#feat=filereader), IE9 must use a form to send files to a server. the iframe is not needed, but it can catch the server response and look better if your upload response is not a functional html page. — dandavis, Dec 24 '14 at 04:09
Could be considered a duplicate of http://stackoverflow.com/questions/7909161/jquery-iframe-file-upload . At least the answer is all there. — hon2a, Dec 26 '14 at 22:27

score 8 · Accepted Answer · edited Jun 16 '17 at 00:26

This code should do the trick. Sorry was a long time ago and I thought that IE9 also could upload using XHR (It should, but this is the Iframe option).

It does the following:

Add a file input to your page (can also be done in HTML)
Put that file selector in a form
add credentials to the form
Submit the form to the iframe and use its page as return value.

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 for example will store the files in $_FILES

What is that code about? That got nothing to do with what author asked for. — Alex G, Oct 10 '16 at 04:34
@AlexG, please tell me how this does not adhere to what the author wants (beside the fact that he accepted the solution). — Mouser, Oct 10 '16 at 07:52

Uploading files using AJAX without FormData (IE9)

1 Answers1

Linked