[PHP] Eliminare la Barra di caricamento file alla fine dell'esecuzione

[Monital]

Salve

ho trovato questo in rete

<script type="text/javascript">
    $(document).ready(function() {
        var p = 10;
        s = setInterval(function() {
            $("#barra").css("width", p + "%");
            $("#percentuale").html(p + "%");
            p++;
            if (p > 100)
                clearInterval(s);
        }, 80);
    });
</script>
<?php
//...bla bla
echo'<div id="dx"><span>In Aggiornamento</span><span id="barra"><span id="percentuale"></span></div>';
?>

forse mi sto perdendo in un bicchier d'acqua perchè los cript funziona ma non riesco a far togliere l barra quando il file ha finito di caricarsi. la batta mi resta sempre lì.

inoltre sarebbe oro se risucissi a far durare la barra proprio il tempo necessario che los cript si carichi.

avevo pensato al refresh ma la barra è molto più veloce dello script quindi quando la barra termina il caricamento in realtà lo script sta ancora caricando.

Suggerimenti?

 

[livellacri]

Per togliere la barra quando arriva al 100 basta che aggiungi

$("#barra").hide();

nell'if.

Quindi diventa:

if (p > 100) {
   clearInterval(s);
   $("#barra").hide();
}

Per farla durare come lo script hai 2 possibilità:

• calcoli il tempo che impiega lo script e di conseguenza modifichi l'intervallo dell'incremento della barra
• crei una funzione incrementabarra e la metti in 100 punti dello script

 

[Monital]

los cript potrebbe anche variare, di poco ma potrebbe, per farla durare quanto lo script puoi aiutarmia s crivere il js? perchè di js io mi limito a prendere qualcosa qua e là non ci capisco molto. Prima opoi dovrò mettermici asu a studiarmelo un pò.

grazie

 

[livellacri]

Sostituisci tutto il codice js con questo:

<script type="text/javascript">
var p = 0;
function incrementaBarra() {
    $("#barra").css("width", p + "%");
    $("#percentuale").html(p + "%");
    p++;
    if (p > 100) {
        $("#barra").hide();
    }
}
</script>

Poi, all'inizio del codice php, metti:

ob_implicit_flush(true);
ob_end_flush();

e in 100 punti dello script php metti questo codice (ad intervalli regolari, per esempio se hai 100 righe mettilo ogni riga), che incrementa la barra di 1.

echo "<script>incrementaBarra();</script>";

In questo modo la barra dura esattamente come il codice php.

 

[Monital]

Per togliere la barra quando arriva al 100 basta che aggiungi

$("#barra").hide();

nell'if.

Quindi diventa:

if (p > 100) {
   clearInterval(s);
   $("#barra").hide();
}

Per farla durare come lo script hai 2 possibilità:

• calcoli il tempo che impiega lo script e di conseguenza modifichi l'intervallo dell'incremento della barra
• crei una funzione incrementabarra e la metti in 100 punti dello script

ciao allora mi fermo un attimo qua, aggiungendo questa stringga non solo mi nasconde la barra ma mi nasconde anche la tabella che visualizzo. ho soloa ggiunto quella riga (mi piace provare le cose una la volta)

per il mi nasc onde intendo che nonve do nemmeno caricarla ma solo erp una frazioen dis econdo

 

[livellacri]

Forse è perché lo span della barra non è chiuso

 

[Monital]

niente la barra non si vede

<script type="text/javascript">
    $(document).ready(function() {
        var p =10;
        s = setInterval(function() {
            $("#barra").css("width", p + "%");
            $("#percentuale").html(p + "%");
            p++;
            if (p > 100)
                clearInterval(s);
                $("#barra").hide();
        }, 80);
    });
</script>

echo'<div id="dx"><span>In Aggiornamento</span><span id="barra"><span id="percentuale"></span></span></div>';

 

[livellacri]

Per togliere la barra quando arriva al 100 basta che aggiungi
Quindi diventa:

if (p > 100) {
   clearInterval(s);
   $("#barra").hide();
}

Non hai messo le parentesi graffe all'if e quindi la barra viene nascosta anche se non è al 100%

 

[Monital]

ah ok perfetto, come in php che se c'è più di un istruzione si deve mettere la graffa, okokok.
funziona però un ultima cortesia. la soluzione da te proposta per la durata della barra non è fattibile eprchè la mia è una ricerca dati su di un file json esterno quindi diventa complicata inserire ogni tot righe ..quindi mi acconterei di qeusto

dove inserisco il tempo di progressione. poniamo che voglio far durare la barra 20 secondi e poi nasconderla?

p.s. ma quell'80 alla fine dellos cript cos rappresenta?

 

[livellacri]

L'80 rappresenta l'intervallo di tempo (in millisecondi) dell'incremento della barra.
Quindi se la vuoi fare durare 20 secondi, partendo dal 10% (come indicato da p), devi sostituire 80 con 222

20 secondi (durata voluta) * 1000 (trasformi in millisecondi) / 90% (percentuale rimanente) = circa 222

 

[Monital]

perfettissimo sei un grande, bella dritta.

 

[pippuccio76]

Ma è possibile collegarla all'upload di un file ?

ho un formdata a cui faccio l'append del file più altri dati il file è :

<!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>

il php fa solo echo del file ricevuto