問(wèn)題：jquery Ajax serialize()表單進(jìn)行序列化方式上傳文件
通過(guò)$(‘#example’).serialize()可以對(duì)form表單進(jìn)行序列化，從而將form表單中的所有參數(shù)傳遞到服務(wù)端孕豹，只能傳遞一般的參數(shù)猎提，上傳文件的文件流是無(wú)法被序列化并傳遞的唇跨。
不過(guò)如今主流瀏覽器都開始支持一個(gè)叫做FormData的對(duì)象适荣，有了這個(gè)FormData噪生，我們就可以輕松地使用Ajax方式進(jìn)行文件上傳了阵翎。
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="example">
username: <input type="text" name="username"/><br/>
password: <input type="password" name="password"/><br/>
file: <input type="file" id="files" multiple/><br/>
<input type="submit" value="提交"/>
</form>
<div id='file-list-display'></div>
<script type="text/javascript">
$(function () {
let fileList = [];
const fileCatcher = $('#example');
const files = $("#files");
const fileListDisplay = $('#file-list-display');
fileCatcher.on("submit", function (event) {
event.preventDefault();
//上傳文件
let formData = new FormData(fileCatcher[0]);
//循環(huán)添加到formData中
fileList.forEach(function (file) {
formData.append('files', file, file.name);
})
const request = new XMLHttpRequest();
request.open("POST", "upload");
request.send(formData);
});
files.on("change", function (event) {
for (var i = 0; i < files[0].files.length; i++) {
fileList.push(files[0].files[i]);
}
let content = '';
fileList.forEach(function (file, index) {
content += '<p>' + (index + 1) + ":" + file.name + '</p>';
})
fileListDisplay.html(content);
});
})
</script>
</body>
</html>
源碼
https://github.com/ncc0706/front-end/blob/master/form-data/form-data-2-jq.html
