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

Monital

Utente Attivo
15 Apr 2009
778
2
18
Salve

ho trovato questo in rete

PHP:
<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

Utente Attivo
18 Ago 2016
108
13
18
Per togliere la barra quando arriva al 100 basta che aggiungi
Codice:
$("#barra").hide();
nell'if.

Quindi diventa:
Codice:
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

Utente Attivo
15 Apr 2009
778
2
18
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

Utente Attivo
18 Ago 2016
108
13
18
Sostituisci tutto il codice js con questo:
Codice:
<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:
PHP:
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.
PHP:
echo "<script>incrementaBarra();</script>";
In questo modo la barra dura esattamente come il codice php.
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
Per togliere la barra quando arriva al 100 basta che aggiungi
Codice:
$("#barra").hide();
nell'if.

Quindi diventa:
Codice:
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
 
Ultima modifica:

Monital

Utente Attivo
15 Apr 2009
778
2
18
niente la barra non si vede

Codice:
<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>
PHP:
echo'<div id="dx"><span>In Aggiornamento</span><span id="barra"><span id="percentuale"></span></span></div>';
 

Monital

Utente Attivo
15 Apr 2009
778
2
18
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

Utente Attivo
18 Ago 2016
108
13
18
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
Codice:
20 secondi (durata voluta) * 1000 (trasformi in millisecondi) / 90% (percentuale rimanente) = circa 222
 
  • Like
Reactions: Monital

pippuccio76

Nuovo Utente
21 Lug 2013
20
1
3
Ma è possibile collegarla all'upload di un file ?

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

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