We are going to implement the AjaxForm plugin for image upload with progress bar. First of all decorate your upload button according to your need if you want. Just take a look on the CSS section that helps to decorate your upload button and some other necessary stuff that helps you to display the progress bar.
[buttons href=”http://webomnizz.com/demo/ajax-upload-with-progress-bar/” title=”Live Demo”]
Display preview before file upload
This script is inspired with Google+ Instant image upload that also display the preview of the file before uploading, that can be possible with the help of FileReader object. FileReader lets web application to store the raw data of the file to the user’s computer and with the help of File or Blob object we can read that raw data.
Important note: File or Blob objects only works in Standard Browsers that support the webkit or Gecko 2.0.
CSS Section:
#fileElement{
display:none;
}
#eGen{
border: 1px solid #2EB0E3;
padding: 8px 15px;
border-radius: 20px;
background: #99d7ef; /* Old browsers */
background: -moz-linear-gradient(top, #99d7ef 0%, #2cafe3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99d7ef), color-stop(100%,#2cafe3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #99d7ef 0%,#2cafe3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #99d7ef 0%,#2cafe3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #99d7ef 0%,#2cafe3 100%); /* IE10+ */
background: linear-gradient(to bottom, #99d7ef 0%,#2cafe3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99d7ef', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */
color: #333333;
font-weight: bold;
font-size: 14px;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
}
.img-con{
width: 400px;
height: 200px;
background: #dfdfdf;
position:relative;
overflow: hidden;
}
.img-con img{
width: 100%;
display: none;
opacity: .3;
}
.loader{
position: absolute;
border: 1px solid #2EB0E3;
width: 100px;
height: 20px;
background: #99d7ef;
border-radius: 10px;
text-align: center;
left: 150px;
top: 90px;
font-size: 11px;
line-height: 20px;
opacity: 0;
overflow: hidden;
}
.loader span:last-child{
display: block;
width: 100%;
background: none;
position: absolute;
top: 0px;
}
.active-loader{
animation: show .5s ease infinite;
}
.active{
opacity: 1;
}
@-moz-keyframes show{
0%{ opacity: 0; }
50%{ opacity: 1; }
100%{ opacity: 0; }
}
@-webkit-keyframes show{
0%{ opacity: 0; }
50%{ opacity: 1; }
100%{ opacity: 0; }
}
@keyframes show{
0%{ opacity: 0; }
50%{ opacity: 1; }
100%{ opacity: 0; }
}
.loader span{
display: block;
}
I tried to make it more attractive with some CSS3 property. Following script delay for 4 Seconds, after that it hits to the action and move your uploaded image on your target folder.
$(function(){
var delay_time = 4000;
// Trigger Event
$('#eGen').click(function(e){
e.preventDefault();
$('#fileElement').trigger('click');
});
// Read File
$('#fileElement').on('change', this, function(e){
var that = this,
loader = $('.loader'),
img = $('#preview');
if(that.files && that.files[0]){
var reader = new FileReader();
reader.onload = function(e){
img
.show()
.attr('src', e.target.result)
.css('opacity', '.3');
loader.addClass('active-loader');
}
reader.readAsDataURL(that.files[0]);
}
// Using the Plugin
// Delay the Request
clearTimeout(window.timer);
window.timer = setTimeout(function(){
loader
.removeClass('active-loader')
.addClass('active');
// Using AjaxForm Plugin
$('#uploadForm').ajaxForm({
uploadProgress: function(e, position, total, percent){
$('span.process', loader).css({'width': percent + '%', 'background': '#2EB0E3', 'height':'20px'});
$('span:eq(1)', loader).html(percent + "%");
},
complete: function(){
$('span:eq(1)', loader).html("loading...");
loader.removeClass('active');
$('span.process', loader)
.css({'width': '0px'});
img.css('opacity', 1);
}
}).submit();
}, delay_time);
});
})