問題描述

在 IE9 中，不支持 FormData，這使得使用 XMLHttpRequest 上傳文件變得不那么簡單了.

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

這可以嗎?我已經看到提到的 iFrame，雖然我不反對編寫一些毛茸茸的代碼，但我不知道如何實現這一點(有很多資源談論上傳到 iFrame，但沒有關于如何獲取文件從 iFrame 到服務器).

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).

使用 vanilla JavaScript(沒有第三方庫)，如何在不使用 FormData 的情況下異步上傳文件?

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

推薦答案

這段代碼應該可以解決問題.抱歉很久以前，我認為 IE9 也可以使用 XHR 上傳(應該，但這是 Iframe 選項).

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).

它執行以下操作:

1. 向您的頁面添加文件輸入(也可以在 HTML 中完成)
2. 將該文件選擇器放入表單中
3. 向表單添加憑據
4. 將表單提交到 iframe 并將其頁面用作返回值.

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 會將文件存儲在 $_FILES

PHP for example will store the files in $_FILES

這篇關于使用沒有 FormData (IE9) 的 AJAX 上傳文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！