Javascript新FormData和HTML表單與（表單）.serializeArray（）之間的區別？

Javascript中新增的FormData類似乎正在猖獗上線。主要針對使用Ajax的多個文件上傳。但一些如何與大多數IE的一些兼容性問題，如果不是10 + ...Javascript新FormData和HTML表單與（表單）.serializeArray（）之間的區別？

我應該有一個HTML這樣的：

<form id="normalForm" enctype="multipart/form-data" onSubmmit="gaga()"> 

<input name="aFile" id="aFile" type="file" multiple/> 

<input type="button" value="go"> 

</form>

和普通的JavaScript：

function gaga { 

var f= document.getElementById("normalForm"); 
/// do something 
}

或與新FORMDATA的一個功能：

function nGaga(){ 

    var f= new FormData() 
     f.append("aFile", fileInputElement.files[0]) 

/// and whatever else to be appended 

    }

房顫通過一些閱讀，我不知何故瞭解到，這主要用於在Javascript中生成"Key:value"對象。然而，使用jQuery，我可以做somethinglike：

var f= $('#normalForm').serializeArray();

這有點給我"Key:value"對象。

那麼，爲什麼要在處理XMLHTTP請求時使用new FormData，儘管它有問題？有什麼區別？

來源

2013-07-20 ErickBest

舉例說，您想要上傳PDF，但也需要將一些用戶生成的元數據與它一起包含爲JSON或XML（或其他任何內容）。隨着FormData我們不僅可以上傳Files和字符串（這已經是可能的HTML表單），但我們也可以上傳Blobs這讓我們上傳動態生成的內容，並能夠指定內容類型：

document.getElementById('dropzone').ondrop = function(e){ 
    e.preventDefault(); 
    uploadFiles(e.dataTransfer.files); 
}; 

function uploadFiles(files) { 
    var nextId = 123; 
    var xml = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>"; 
    var json = { 
    title: "Hello World!", 
    tags: ["pdf", "non-fiction", "literature"], 
    token: "ABCeasyAs123" 
    }; 

    files.forEach(function(file, i) { 
    var formData = new FormData(); 
    var xhr = new XMLHttpRequest(); 
    json.id = nextId + i; 

    formData.append("XML", new Blob([ xml ], { type: "text/xml" }); 
    formData.append("JSON", new Blob([ JSON.stringify(json) ], { type: "application/json" })); 
    formData.append("PDF", file); 

    xhr.open("POST", "/upload"); 
    xhr.upload.onprogress = function(event) { 
     if (event.lengthComputable) { 
     var progress = (event.loaded/event.total * 100 | 0); 
     console.log('Upload #%d is %d% complete.', i+1, progress); 
     } 
    } 
    xhr.send(formData); 
    }); 
}

來源

2013-07-20 19:14:50 idbehold

清除...我現在可以看到現在使用...現在要解決瀏覽器兼容性問題會發生什麼？...針對IE早期版本比10更低的anyWorkAround？ – ErickBest

@ErickBest當涉及到IE <10的支持時，你基本上是SOL。唯一可能的解決方案是使用Flash來處理上傳（這可能不是理想的）。 – idbehold

Javascript新FormData和HTML表單與（表單）.serializeArray（）之間的區別？

回答

相關問題