jquery ajax上傳文件

最原始的上傳是表單上傳:

<form action="http://localhost:3000/upload-single" method="post" enctype="multipart/form-data">
	<h2>單圖上傳</h2>
	<input type="file" name="logo">
	<input type="submit" value="提交">
</form>

然后再到jq的ajax上傳：

• formData表單+ajax提交

<form id="uploadForm">
	<p>指定文件名： <input type="text" name="filename" value="" /></p>
	<p>上傳文件： <input type="file" name="logo" /></ p>
	<input type="button" value="上傳" onclick="doUpload()" />
</form>

FormData對象，是可以使用一系列的鍵值對來模擬一個完整的表單，然后使用XMLHttpRequest發送這個"表單"

注意點

• processData設置為false。因為data值是FormData對象，不需要對數據做處理。
• <form>標簽添加enctype="multipart/form-data"屬性。
• cache設置為false，上傳文件不需要緩存。
• contentType設置為false。因為是由<form>表單構造的FormData對象，且已經聲明了屬性enctype="multipart/form-data"，所以這里設置為false

上傳后，服務器端代碼需要使用從查詢參數名為logo獲取文件輸入流對象，因為<input>中聲明的是name="logo"

function doUpload() {
	$.ajax({
		url: 'http://localhost:3000/upload-single',
		type: 'POST',
		cache: false, //不必須
		data: new FormData($('#uploadForm')[0]),
		processData: false,//必須
		contentType: false,//必須
		success: function(data) {
			console.log(data)
		}
	})
}