Progess bar upload

Progess bar upload

HI,sorry for english , i want implement a progress bar on a file upload :

  1. <!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="dialog" title="File Download">
    <div class="progress-label">Starting download...</div>
    <div id="progressbar"></div>
    </div>
    <div id="risultato"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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();
    $( function() {
    var progressTimer,
    progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" ),
    dialogButtons = [{
    text: "Cancel Download",
    click: closeDownload
    }],
    dialog = $( "#dialog" ).dialog({
    autoOpen: false,
    closeOnEscape: false,
    resizable: false,
    buttons: dialogButtons,
    open: function() {
    progressTimer = setTimeout( progress, 2000 );
    },
    beforeClose: function() {
    downloadButton.button( "option", {
    disabled: false,
    label: "Start Download"
    });
    }
    }),
    downloadButton = $( "#upload" )
    .button()
    .on( "click", function() {
    $( this ).button( "option", {
    disabled: true,
    label: "Downloading..."
    });
    dialog.dialog( "open" );
    });
    progressbar.progressbar({
    value: false,
    change: function() {
    progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
    },
    complete: function() {
    progressLabel.text( "Complete!" );
    dialog.dialog( "option", "buttons", [{
    text: "Close",
    click: closeDownload
    }]);
    $(".ui-dialog button").last().trigger( "focus" );
    }
    });
    function progress() {
    var val = progressbar.progressbar( "value" ) || 0;
    progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
    if ( val <= 99 ) {
    progressTimer = setTimeout( progress, 50 );
    }
    }
    function closeDownload() {
    clearTimeout( progressTimer );
    dialog
    .dialog( "option", "buttons", dialogButtons )
    .dialog( "close" );
    progressbar.progressbar( "value", false );
    progressLabel
    .text( "Starting download..." );
    downloadButton.trigger( "focus" );
    }
    } );
    //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>
     
 The php code only show if file is arrived . This bar dont work in this code  and if work work with time and not with the upload