在不用jQuery的情況下使用AJAX+FormData來上傳檔案

上傳檔案時，因為必然是以enctype="multipart/form-data"來顯示
然而，AJAX就是問題了。要如何寫payload？
幸好，HTML5提供了FormData這簡單的東西給我們了

下為一個簡單的 form ：

<form id="upload-form" enctype="multipart/form-data" method="post" action="upload">
	File Name：<input type="text" name="name" /><br />
	<input type="file" name="file" /><br />
	<input type="submit" />
</form>

而 FormData 使用方式如下：

var formData = new FormData

var xhr = new XMLHttpRequest
xhr.open("POST", document.querySelector("form#upload-form").action, true);

var formElements = [].slice.call(document.querySelectorAll("form#upload-form [name]")) // 用 Array.prototype.slice.call 將 NodeList 轉為 Array

formElements.forEach(function(node, index, array){
	if(node.type == "file"){
		formData.append(node.name, node.files[0])
	}else{
		formData.append(node.name, node.value)
	}
})

xhr.send(formData)

上面方式是比較能夠自由決定要傳送的 form data
如果閒麻煩可以直接用下面的 code

var formData = new FormData(document.querySelector("form#upload-form"));

參考資料

• Using FormData Objects - Web API Interfaces | MDN

另外補充一下，這是我去 Stack Overflow 詢問得知的，我當初問的問題：

• javascript - How do I use AJAX to upload file - Stack Overflow