2017-03-21 00:45:57 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>AJAX Upload Example</title>
|
|
|
|
|
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
function updateProgress(evt) {
|
|
|
|
|
if (evt.lengthComputable) {
|
|
|
|
|
document.getElementById("output").textContent =
|
|
|
|
|
"Uploaded " + evt.loaded + " of " + evt.total + " bytes";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
function uploadFile() {
|
|
|
|
|
var file_data = new FormData(document.getElementById('filename'));
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: "/upload",
|
|
|
|
|
type: "POST",
|
|
|
|
|
data: file_data,
|
|
|
|
|
processData: false,
|
|
|
|
|
contentType: false,
|
|
|
|
|
cache: false,
|
|
|
|
|
xhr: function() {
|
|
|
|
|
myXhr = $.ajaxSettings.xhr();
|
|
|
|
|
if(myXhr.upload){
|
|
|
|
|
myXhr.upload.addEventListener('progress',updateProgress, false); // for handling the progress of the upload
|
|
|
|
|
}
|
|
|
|
|
return myXhr;
|
|
|
|
|
},
|
|
|
|
|
}).done(function(data) {
|
|
|
|
|
document.getElementById("output").textContent = "Result: " + data;
|
|
|
|
|
});
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2017-03-21 01:14:39 +08:00
|
|
|
<h1>Upload file using standard form upload</h1>
|
|
|
|
|
|
|
|
|
|
<form method="POST" action="/upload" enctype="multipart/form-data">
|
|
|
|
|
<label>Select a file:</label><br>
|
|
|
|
|
<input type="file" name="file" />
|
|
|
|
|
<input type="submit" value="Upload" />
|
|
|
|
|
</form>
|
|
|
|
|
|
|
|
|
|
<h1>Upload file using Ajax - that also gives progress report</h1>
|
2017-03-21 00:45:57 +08:00
|
|
|
<form method="post" id="filename" name="filename" onsubmit="return uploadFile();">
|
|
|
|
|
<label>Select a file:</label><br>
|
|
|
|
|
<input type="file" id="file" name="file" required />
|
|
|
|
|
<input type="submit" value="Upload" />
|
|
|
|
|
</form>
|
|
|
|
|
<br><br><div id="output"></div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
