话不多说上代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Spring 3.0 MVC demo</title>
<script>
function uploadFile() {
var fd = new FormData();
var xhr = new XMLHttpRequest();
var fileName = document.getElementById("fileName");
var fileInfo = document.getElementById("upload").files[0];
fileName.innerText = "FileName: " + fileInfo.name;
fd.append("upload", document.getElementById('upload').files[0]);
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "upload.html");
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById("progressNumber").innerText
= "progressNumber: " + percentComplete.toString() + '%';
}
else {
document.getElementById("progressNumber").innerText = "unable to compute";
}
}
function uploadComplete(evt) {
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
Please choose the file :<br />
<form action="upload.html" method="post" enctype="multipart/form-data">
<input type="file" id="upload" size="50"/>
<br />
<input type="button" value="开始上传" onclick="uploadFile()"/>
</form>
<p id=fileName>FileName: -</p>
<p id="progressNumber">progressNumber: -</p>
</body>
</html>