Можно использовать для этого jQuery + плагин Form.
Игрался с этим одно время, вот мои наработки)
Пример:
7bo.ru/example.html<html>
<head>
<style>
progress {
display: block;
background-color: #f3f3f3;
border: 0;
width: 400px;
height: 20px;
border-radius: 9px;
}
progress::-webkit-progress-bar {
background-color: #f3f3f3;
border-radius: 9px;
}
progress::-webkit-progress-value {
background: #00c900;
border-radius: 9px;
}
progress::-moz-progress-bar {
background: #00c900;
border-radius: 9px;
}
#progress-text:after {
content: attr(data-progress);
width: 400px;
margin-top: -21px;
font-weight: bold;
color: #008800;
text-align: center;
display: block;
}
#result {
display: none;
}
#label {
padding: 6px;;
background-color: #d3d3d3;
border-radius: 9px;
}
input[type="file"] {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script>
$(document).ready(function() {
$('#file').on('change', function() {
$('#form').submit();
});
$('#form').submit(function() {
var progress = $('#progress');
$(this).ajaxSubmit({
beforeSend: function() {
$('#result').fadeIn(1000);
$('#form').fadeOut(100);
},
uploadProgress: function(event, position, total, percent) {
progress.attr('value', percent);
$('#progress-text').attr('data-progress', function() {
if(percent == 100) {
return 'Файл загружен';
}
return percent+'%';
});
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form" method="post" action="?" enctype="multipart/form-data">
<input id="file" type="file" name="file" />
<label for="file" id="label">Выберите файл...</label>
</form>
<div id="result">
<progress max="100" value="100" id="progress"></progress>
<div id="progress-text" data-progress="Файл загружен!"></div>
</div>
</body>
</html>
