Skip to content

Instantly share code, notes, and snippets.

@shivasurya
Created August 7, 2014 16:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shivasurya/7c7e81eebd6e95dbd191 to your computer and use it in GitHub Desktop.
Save shivasurya/7c7e81eebd6e95dbd191 to your computer and use it in GitHub Desktop.
This script.js is a third party plugin which is used to upload files via ajx with progress bar - generally using bootstrap
$(function() {
var showInfo = function(message) {
$('div.progress').hide();
$('strong.message').text(message);
$('div.alert').show();
};
$('input[type="submit"]').on('click', function(evt) {
evt.preventDefault();
$('div.progress').show();
var formData = new FormData();
var file = document.getElementById('myFile').files[0];
formData.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('post', '/', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentage = (e.loaded / e.total) * 100;
$('div.progress div.bar').css('width', percentage + '%');
}
};
xhr.onerror = function(e) {
showInfo('An error occurred while submitting the form. Maybe your file is too big');
};
xhr.onload = function() {
showInfo(this.statusText);
};
xhr.send(formData);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment