mongoose/examples/ajax_upload/index.html
Alexander Alashkin 066be0fe30 Add ajax_upload example
PUBLISHED_FROM=c5691d4321fff2e03f689b0195abd1ec6a188418
2017-03-20 10:51:24 +00:00

48 lines
1.4 KiB
HTML

<!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_name = $('input[type=file]').val().split('\\').pop();
console.log("uploadFile: ", file_name)
var file_data = document.getElementById('file').files[0];
$.ajax({
url: "/upload?file_name=" + file_name,
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>
<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>