注意:以下代码为了判断多个文件是否全部上传成功,使用的是同步上传,非异步上传。如果想要使用异步上传,将async设置为true即可,但这样也会导致无法判断所有文件均已上传成功,请斟酌修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试ajax同步批量上传文件</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<form method="post" enctype="multipart/form-data" onsubmit="return false">
<input id="fileInput" type="file" name="fileInput" multiple="multiple">
<input id="uploadBtn" type="button" value="提交" onclick="ajaxFileUpload()" />
</form>
<script type="text/javascript">
function ajaxFileUpload() {
debugger
var files = document.getElementById("fileInput").files;
for (var filesKey in files) {
var file = files[filesKey];
if(file instanceof File){
var formData = new FormData();
formData.append("file"+filesKey, file);
ajaxUpload(formData);
}
}
console.log("所有文件均已上传完毕.")
return false;
}
function ajaxUpload(formData) {
$.ajax({
/** 这里改成自己的上传接口 */
url: "http://localhost:8088/r/uf",
type: "POST",
data: formData,
/** 必须false才会自动加上正确的 Content-Type */
contentType: false,
/** 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */
processData: false,
async: false,
cache: false,
dataType: "json",
success: function (data) {
console.log(data);
}, error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("上传失败!");
}
});
}
</script>
</body>
</html>