HTML
<form name="frmContact" method="post" enctype="multipart/form-data" action="/ajax/upload" >
<div>
<input name="name" required class="nome form-control" type="text" placeholder="Digite seu nome">
</div>
<div class="file-upload">
<input type="file" name="file-upload">
</div>
<div id="progress-wrp">
<div class="progress-bar"></div>
<div class="status">0%</div>
</div>
</form>
CSS
<style>
#progress-wrp {
border: 1px solid #E55000;
padding: 1px;
position: relative;
height: 30px;
border-radius: 3px;
margin: 10px;
text-align: left;
background: #fff;
box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar{
height: 100%;
border-radius: 3px;
background-color: #ff8900;
width: 0;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status{
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #E55000;
}
</style>
JAVASCRIPT
(function ($) {
$("form[name=frmContact]").submit(function (e) {
e.preventDefault();
var data;
var contentType = "application/x-www-form-urlencoded";
var processData = true;
if ($(this).attr('enctype') == 'multipart/form-data') {
data = new FormData($(this).get(0));//seleciona classe form-horizontal adicionada na tag form do html
contentType = false;
processData = false;
} else {
data = $(this).serialize();
}
$.ajax({
data: data,
type: $(this).attr('method'),
url: $(this).attr('action'),
contentType: contentType,
processData: processData,
success: function (response) {
console.log(response);
},
error: function (exr, sender) {
alert('Erro ao carregar pagina');
},
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { // Avalia se tem suporte a propriedade upload
myXhr.upload.addEventListener('progress', function (event) {
/* faz alguma coisa durante o progresso do upload */
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
var progress_bar_id = "#progress-wrp";
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
// update progressbars classes so it fits your code
$(progress_bar_id + " .progress-bar").css("width", +percent + "%");
$(progress_bar_id + " .status").text(percent + "%");
}, false);
}
return myXhr;
}
});
});
})(jQuery);