Barra Avanzamento

**pippuccio76** · 19-12-2016, 23:54

Salve dovrei inviare un numero imprecisato di file (da 1 a 10 ) più altri dati semplicemente via POST , è possibile aggingere al posto del semplice caricamento in corso che si vede nel browser in basso una barra con avanzamento ?

**cavicchiandrea** · 20-12-2016, 10:06

Ci sono diversi script in rete per upload che fanno questo vedi se https://vaadin.com/elements/-/element/vaadin-upload fa al caso tuo

**pippuccio76** · 20-12-2016, 13:47

Originariamente inviata da cavicchiandrea

Ci sono diversi script in rete per upload che fanno questo vedi se https://vaadin.com/elements/-/element/vaadin-upload fa al caso tuo

Non voglio inviarlo via ajax ma semplicemente sostituire il caricamento in corso in basso con una barra di caricamento.

**cavicchiandrea** · 20-12-2016, 16:08

Non puoi eseguire una barra di caricamento con un invio normale in post, devi usare per forza ajax per interrogare lo stato del server

**pippuccio76** · 20-12-2016, 19:25

Ho provato a mettere un modale con una gif animata ma non carica il file , è normale?

**br1** · 20-12-2016, 20:57

Originariamente inviata da pippuccio76

Ho provato a mettere un modale con una gif animata ma non carica il file , è normale?

la descrizione testuale non e' sufficiente, ci sono diversi modi per attuare quanto descritto, il tuo qual'e'?

**pippuccio76** · 30-12-2016, 15:06

Originariamente inviata da br1

la descrizione testuale non e' sufficiente, ci sono diversi modi per attuare quanto descritto, il tuo qual'e'?

questo l'html e js :

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="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>

che invia i dati a una pagina php che altro non stampa che i file sono arrivati :

qui è l'esempio :

http://lemuria.altervista.org/invio_file_progess_bar/

Discussione: Barra Avanzamento

Strumenti discussione

Ricerca discussione

Visualizza

Barra Avanzamento

Permessi di invio