Salve dovrei creare una barra di avanzamento che procede in simultanea con l'avanzamento dell'upload:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form enctype="multipart/form-data" name='lavorazione' >
<input type="file" name="uploadfile" id="uploadfile" /><br>
Nome: <input type="text" name="nome" id=" nome1"value="" /> <br>
Cognome <input type="text" name="cognome" id="cognome1" value="" /> <br>
<button id="aggiungi" class='btn btn-info'>Aggiungi Lavorazione</button>
<button type="button" name="crea" id="upload" class='btn btn-success'>Inserisci Lavorazioni</button>
</form>
<div id="barra"></div>
<div id="dx"><span>In Aggiornamento</span><span id="barra"><span id="percentuale"></span></span></div>
<div id="risultato"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").hide();
$("#upload").click(function() {
var file1 = lavorazione.uploadfile.value;
if(controlla_e_invia()){
$('#upload').hide();
$('#aggiungi').hide();
$("#dialog").show();
var p =10;
s = setInterval(function() {
$("#barra").css("width", p + "%");
$("#percentuale").html(p + "%");
p++;
if (p > 100)
clearInterval(s);
$("#barra").hide();
}, 80);
//Creazione di un oggetto FormData…
var datiForm = new FormData();
//####################################
// FILE 1 #
//####################################
//… aggiunta del file
datiForm.append('file',$("#uploadfile")[0].files[0]);
//… aggiunta del nome
datiForm.append('nome',$("#nome1").val());
//aggiunta cognome
datiForm.append('cognome',$("#sel_scala_colori1").val());
$.ajax({
url: 'lavorazione_inserita.php',
type: 'POST', //Le info testuali saranno passate in POST
data: datiForm, //I dati, forniti sotto forma di oggetto FormData
cache: false,
processData: false, //Serve per NON far convertire l’oggetto
//FormData in una stringa, preservando il file
contentType: false, //Serve per NON far inserire automaticamente
//un content type errato
success: function(msg)
{
$("#risultato").html(msg);
},
error: function()
{
alert("Chiamata fallita fformdata, si prega di riprovare...");
}
});
}
});
});
function controlla_e_invia(){
var file1 = lavorazione.uploadfile.value;
var nome1 = lavorazione.nome.value;
var cognome = lavorazione.cognome.value;
if(file1==''){
var message = 'Non hai selezionato il file 1' ;
alert(message);
return false;
}
if(nome1==''){
var message = 'Non hai selezionato il nome 1' ;
alert(message);
return false;
}
if(cognome==''){
var message = 'Non hai selezionato il cognome 1' ;
alert(message);
return false;
}else{
return true
}
}
</script>
</body>
</html>
Questa funziona solamente con il tempo ma non è collegata in nessun modo all'upload