Pagina form upload
codice:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento senza titolo</title>
<style type="text/css">
body{margin:0px; padding:0px;}
.inputfile{
    height: 20px;
    margin-bottom: 5px;
    margin-right: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 500px;
    display: inline-block;
    background-color: #FF6600;
}
progress {
    display: none;
}
</style>
</head>

<body>

<form action="tuapaginaupload.php" method="post" enctype="multipart/form-data" name="form-upload">
<input  class="inputfile" name="images[]" type="file">
  <input name="invia" type="button" onclick="uploadFile(this.form);" value="salva"> <progress min="0" max="100" value="0">0% complete</progress>
</form>
<script src="script.js"></script>
</body>
</html>
pagina script.js
codice:
var uploadFile = function(form){
    var xhr = new XMLHttpRequest();
    var formData = new FormData(form);
    var progressBar = document.querySelector('progress');
 progressBar.style.display='block';

    xhr.upload.addEventListener("progress", function(e){
        if(e.lengthComputable) {
            $('input[name="invia"]').attr('disabled',true)
            progressBar.value = ( e.loaded / e.total ) * 100;
            progressBar.textContent = progressBar.value + '% complete';
        }
    }, false);
 
    xhr.open(form.method, form.action, true);
    xhr.onreadystatechange = function(){
        
        if(xhr.readyState == 4){
        progressBar.style.display='none';
progressBar.value = '';
    }
}
    xhr.send(formData);
 
        return false;
 
}