Implemnetare progress bar ad upload...

  • Creatore Discussione Creatore Discussione pollat
  • Data di inizio Data di inizio

pollat

Utente Attivo
10 Ott 2013
63
0
6
Ciao a tutti.
Ho creato uno script per effettuare l'upload di file e vorrei implementare ad esso una progress bar che indichi lo stato di avanzamento del caricamento del file che si sta uplodando... Finora sono riuscito a far apparire una immagine gif ma non so come devo fare per sostituirla con una progress bar vera...

il form per l'upload è questo:
HTML:
<div class="wrap">
<?php
# error messages
if (isset($message)) {
foreach ($message as $msg) {
printf("<p id=colore_successo_upload; class='statusupload'>%s</p></ br>\n", $msg);
}
}
# success message
if($count !=0){
printf("<p id=colore_successo_upload; class=statusupload>%d file aggiunto/i correttamente !</p>\n", $count);
}
?>
<br />
<!-- Multiple file upload html form-->
<form action="" method="post" enctype="multipart/form-data" onSubmit="showSpindle()" method="POST"/>
Carica uno o più file:
<input type="file" name="files[]" multiple="multiple" style="width: 300px"/>
<input type="submit" class="tastoupload" value="Carica"/>
</form>

<!-- Div immagine gif che appare dopo avre premuto carica-->
<div class="pic" id="spindle" style="display:none"> 
<img alt="Loading..." style="display:block; margin:5px 30px;" src="loading.gif" style="text-align:center";> 
<!-- <div id="loading_txt">Attendi... sto caricando il file</div> -->
</div> 
<script type="text/javascript">
function showElem(elem_id,elem_type) 
{
var elem = document.getElementById(elem_id);
if (elem) 
{
if (elem_type) 
elem.style.display = elem_type;
else 
{
if (elem.nodeName == "DIV"
|| elem.nodeName == "TABLE"
|| elem.nodeName == "UL"
|| elem.nodeName == "OL"
|| elem.nodeName == "H1"
|| elem.nodeName == "H2"
|| elem.nodeName == "H3"
|| elem.nodeName == "H4"
|| elem.nodeName == "P") 

elem.style.display = 'block';

else if (elem.nodeName == "TR") elem.style.display = 'table-row';
else if (elem.nodeName == "TD") elem.style.display = 'table-cell';
else if (elem.nodeName == "LI") elem.style.display = 'list-item';
else elem.style.display = 'inline';
}
}
} 

function showSpindle() 
{
showElem('li_inserted_pics');
showElem('spindle');
} 

</script>

</div>

mentre lo script PHP per l'upload è il seguente:
PHP:
include ( 'connessione_database.php' ); 
$result = mysql_query ( " SELECT * FROM tabellaschede WHERE idscheda=$numeroutente " ) or die ( mysql_error() ); 

while( $row= mysql_fetch_array($result)) { 

$nomeutente = $row['nome']; 

} 
?>
<?php
// scrip multiupload 
$valid_formats = array("jpg", "jpeg", "png", "gif", "bmp", "tif", "psd", "pdf", "doc", "docx" ); 
$max_file_size = 10024*10000; //100000 kb
$path = "cartellaupload/"; // Cartella di upload
$count = 0;

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
// Loop $_FILES to execute all files
foreach ($_FILES['files']['name'] as $f => $name) { 
if ($_FILES['files']['error'][$f] == 4) {
continue; // Skip file if any error found
} 
//controllo il peso del file (in base a quello impostato sopra)
// per far visualizzare i messaggi all'interno del box verde sostituire "echo" con "$message[] ="
if ($_FILES['files']['error'][$f] == 0) { 
if ($_FILES['files']['size'][$f] > $max_file_size) {
echo "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è troppo grande, caricare file di max 100 MB!.<span><br>";
continue; // Skip large files
}
//controllo il formato del file (in base a quelli impostati sopra)
elseif( ! in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats) ){
  echo "<br><span id='colore_errore_upload';>ATTENZIONE: il file ' $name ' ha un formato non valido.</span><br><span id='colore_suggerimento__errore_upload';> I formati supportati sono: jpg, jpeg, gif, png, tif, psd, pdf, doc, docx, txt, <span><br>";
continue; // Skip invalid file formats
}
//controllo l'esistenza del file per evitare sovrascrizioni
else{ 

if(!file_exists($path.$name))
{
move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$name);
$count++; // Number of successfully uploaded file 
} 

else{
echo "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è già esistente nell'elenco.</span><br><span id='colore_suggerimento__errore_upload';> Cambiare nome al file e caricarlo nuovamente.</span><br>";
}
}
}
}
}

Potete aiutarmi indicandomi un metodo semplice????
 
imho !

Prima di postare vai a vedere lì su quel link, trovi un semplice form upload con all'interno una progress bar che segue il caricamento del file.

Scaricati l'archivio e vedi la progress bar com'è formata e la studi :]

Io ho provato e funziona lo script...
 
In alternativa ho scritto una piccola libreria javascript, molto compatta, che permette l'upload multiplo di file in modo asincrono (definire una progress bar è una cosa molto semplice come puoi vedere dal link) e può convivere tranquillamente con altri framework.

Dovresti poterla agganciare molto facilmente ai tuoi moduli esistenti.
 
imho !

Prima di postare vai a vedere lì su quel link, trovi un semplice form upload con all'interno una progress bar che segue il caricamento del file.

Scaricati l'archivio e vedi la progress bar com'è formata e la studi :]

Io ho provato e funziona lo script...


Ho provato ad adattarlo ma dopo l click mi appare la barra vuota con scritto "NaN" senza che parta la progressione...

Lo ho adattato così:
HTML:
<?php
// script multiupload 
$valid_formats = array("jpg", "jpeg", "png", "gif", "bmp", "tif", "psd", "pdf", "doc", "docx", "txt", "xls", "xlsx", "mid", "mp3", "wav", "ogg", "dwg", "dxf", "svg", "zip", "rar", ); 
$max_file_size = 10024*10000; //100000 kb
$path = "cartellaupload/"; // Cartella di upload
$count = 0;

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
	// Loop $_FILES to execute all files
	foreach ($_FILES['files']['name'] as $f => $name) {     
	    if ($_FILES['files']['error'][$f] == 4) {
	        continue; // Skip file if any error found
	    }	       
	    	//controllo il peso del file (in base a quello impostato sopra)
	    	// per far visualizzare i messaggi all'interno del box verde sostituire "echo" con "$message[] ="
	    if ($_FILES['files']['error'][$f] == 0) {	           
	        if ($_FILES['files']['size'][$f] > $max_file_size) {
	            echo "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è troppo grande, caricare file di max 100 MB!.<span><br>";
	            continue; // Skip large files
	        }
		//controllo il formato del file (in base a quelli impostati sopra)
			elseif( ! in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats) ){
				echo "<br><span id='colore_errore_upload';>ATTENZIONE: il file ' $name ' ha un formato non valido.</span><br><span id='colore_suggerimento__errore_upload';> I formati supportati sono: jpg, jpeg, gif, png, tif, psd, pdf, doc, docx, txt, xls, xlsx, mid, mp3, wav, ogg, dwg, dxf, svg, zip, rar. <span><br>";
				continue; // Skip invalid file formats
			}
		//controllo l'esistenza del file per evitare sovrascrizioni
                else{ 

                if(!file_exists($path.$name))
                {
                  move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$name);
                  $count++; // Number of successfully uploaded file                 
                } 
                
                else{
                    echo "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è già esistente nell'elenco.</span><br><span id='colore_suggerimento__errore_upload';>  Cambiare nome al file e caricarlo nuovamente.</span><br>";
                                }
  }
  }
  }
}
?>




<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Upload your file</title>

<!--Progress Bar and iframe Styling-->
<link href="style_progress.css" rel="stylesheet" type="text/css" />

<!--Get jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>

<!--display bar only if file is chosen-->
<script>

$(document).ready(function() { 
//

//show the progress bar only if a file field was clicked
	var show_bar = 0;
    $('input[type="file"]').click(function(){
		show_bar = 1;
    });

//show iframe on form submit
    $("#form1").submit(function(){

		if (show_bar === 1) { 
			$('#upload_frame').show();
			function set () {
				$('#upload_frame').attr('src','upload_frame.php?up_id=<?php echo $up_id; ?>');
			}
			setTimeout(set);
		}
    });
//

});

</script>

</head>

<body>

	<div class="wrap">
		<?php
		# error messages
		if (isset($message)) {
			foreach ($message as $msg) {
				printf("<p id=colore_successo_upload; class='statusupload'>%s</p></ br>\n", $msg);
			}
		}
		# success message
		if($count !=0){
			printf("<p id=colore_successo_upload; class=statusupload>%d file aggiunto/i correttamente !</p>\n", $count);
		}
		?>
		<br />
<div>
  <?php if (isset($_GET['success'])) { ?>
  <span class="notice">Your file has been uploaded.</span>
  <?php } ?>
  <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
    Choose a file to upload<br />

<!--APC hidden field-->
    <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
<!---->

    <input type="file" name="files[]" multiple="multiple" id="file" size="30"/>

<!--Include the iframe-->
    <br />
    <iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe>
    <br />
<!---->

    <input name="Submit" class="tastoupload" type="submit" id="submit" value="Carica" />
  </form>
  </div>
    </div>

</body>

</html>
 
Ultima modifica:
ok, ho trovato la soluzione ...aggiungendo questa funzione nel form:

HTML:
<div class="progress" id="spindle"> 
<div class="bar"></div > 
<div class="percent">0%</div > 
</div> 
<div id="status"></div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script> 
(function() { 
var bar = $('.bar'); 
var percent = $('.percent'); 
var status = $('#status'); 
$('form').ajaxForm({ 
beforeSend: function() { 
status.empty(); 
var percentVal = '0%'; 
bar.width(percentVal) 
percent.html(percentVal); 
}, 
uploadProgress: function(event, position, total, percentComplete) { 
var percentVal = percentComplete + '%'; 
bar.width(percentVal) 
percent.html(percentVal); 
}, 
complete: function(xhr) { 
bar.width("100%"); 
percent.html("100%"); 
status.html(xhr.responseText); 
} 
}); 
})(); 
</script>

L'unica pecca è che alla fine del caricamento invece di aggiornare l'intera pagina apre un frame sotto al modulo... sapete dirmi il motivo e come evitarlo????
 
Alla fine del caricamento viene inviato un parametro in GET dove visualizzi il messaggio di avvenuto successo:

PHP:
  <?php if (isset($_GET['success'])) { ?>
  <span class="notice">Your file has been uploaded.</span>
  <?php } ?>

al posto di

PHP:
<span class="notice">Your file has been uploaded.</span>

puoi implementare la funzione header o refresh.
 
quella era la funzione vecchia che non partiva....
io mi riferisco a quella ultima che ho postato e che funzioan bene ossia questa:

HTML:
<?php  
// scrip multiupload 
$valid_formats = array("jpg", "jpeg", "png", "gif", "bmp", "tif", "psd", "pdf", "doc", "docx", "txt", "xls", "xlsx", "mid", "mp3", "wav", "ogg", "dwg", "dxf", "svg", "zip", "rar", ); 
$max_file_size = 10024*10000; //100000 kb
$path = "cartellaupload/"; // Cartella di upload
$count = 0;

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
	// Loop $_FILES to execute all files
	foreach ($_FILES['files']['name'] as $f => $name) {     
	    if ($_FILES['files']['error'][$f] == 4) {
	        continue; // Skip file if any error found
	    }	       
	    	//controllo il peso del file (in base a quello impostato sopra)
	    	// per far visualizzare i messaggi all'interno del box verde sostituire "echo" con "$message[] ="
	    if ($_FILES['files']['error'][$f] == 0) {	           
	        if ($_FILES['files']['size'][$f] > $max_file_size) {
	            echo "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è troppo grande, caricare file di max 100 MB!.<span><br>";
	            continue; // Skip large files
	        }
		//controllo il formato del file (in base a quelli impostati sopra)
			elseif( ! in_array(pathinfo($name, PATHINFO_EXTENSION), $valid_formats) ){
				echo "<br><span id='colore_errore_upload';>ATTENZIONE: il file ' $name ' ha un formato non valido.</span><br><span id='colore_suggerimento__errore_upload';> I formati supportati sono: jpg, jpeg, gif, png, tif, psd, pdf, doc, docx, txt, xls, xlsx, mid, mp3, wav, ogg, dwg, dxf, svg, zip, rar. <span><br>";
				continue; // Skip invalid file formats
			}
		//controllo l'esistenza del file per evitare sovrascrizioni
                else{ 

                if(!file_exists($path.$name))
                {
                  move_uploaded_file($_FILES["files"]["tmp_name"][$f], $path.$name);
                  $count++; // Number of successfully uploaded file                 
                } 
                
                else{
                    echo "<br><span id='colore_errore_upload';>ATTENZIONE: Il file ' $name ' è già esistente nell'elenco.</span><br><span id='colore_suggerimento__errore_upload';>  Cambiare nome al file e caricarlo nuovamente.</span><br>";
                                }
  }
  }
  }
}
?>





 <head>  
 <style>  
 .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }  
 .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }  
 .percent { position:absolute; display:inline-block; top:3px; left:48%; }  
 </style>  
 
 </head> 

	<div class="wrap">
		<?php
		# error messages
		if (isset($message)) {
			foreach ($message as $msg) {
				printf("<p id=colore_successo_upload; class='statusupload'>%s</p></ br>\n", $msg);
			}
		}
		# success message
		if($count !=0){
			printf("<p id=colore_successo_upload; class=statusupload>%d file aggiunto/i correttamente !</p>\n", $count);
		}
		?>
		<br />
		<!-- Multiple file upload html form-->
		<form action="" method="post" enctype="multipart/form-data" onSubmit="showSpindle()" method="POST"/>
		Carica uno o più file:
			<input type="file" name="files[]" multiple="multiple" style="width: 300px"/>
			<input type="submit" class="tastoupload" value="Carica"/>
		</form>
		
 <div class="progress" id="spindle">  
     <div class="bar"></div >  
     <div class="percent">0%</div >  
   </div>  
   <div id="status"></div>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>  
 <script src="http://malsup.github.com/jquery.form.js"></script>  
 <script>  
 (function() {  
 var bar = $('.bar');  
 var percent = $('.percent');  
 var status = $('#status');  
 $('form').ajaxForm({  
   beforeSend: function() {  
     status.empty();  
     var percentVal = '0%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   uploadProgress: function(event, position, total, percentComplete) {  
     var percentVal = percentComplete + '%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   complete: function(xhr) {  
     bar.width("100%");  
     percent.html("100%");  
     status.html(xhr.responseText);  
   }  
 });   
 })();      
 </script>  		
</div> 
<script type="text/javascript">
	function showElem(elem_id,elem_type) 
	{
		var elem = document.getElementById(elem_id);
		if (elem) 
		{
			if (elem_type) 
			elem.style.display = elem_type;
		else 
		{
			if (elem.nodeName == "DIV"
			|| elem.nodeName == "TABLE"
			|| elem.nodeName == "UL"
			|| elem.nodeName == "OL"
			|| elem.nodeName == "H1"
			|| elem.nodeName == "H2"
			|| elem.nodeName == "H3"
			|| elem.nodeName == "H4"
			|| elem.nodeName == "P") 
							
				elem.style.display = 'block';
							
			else if (elem.nodeName == "TR") elem.style.display = 'table-row';
			else if (elem.nodeName == "TD") elem.style.display = 'table-cell';
			else if (elem.nodeName == "LI") elem.style.display = 'list-item';
			else elem.style.display = 'inline';
		}
	}
} 
			
function showSpindle() 
{
	showElem('li_inserted_pics');
	showElem('spindle');
} 
		
</script>
		
</div>


</body>

Solo che alla fine del caricamento invece di riportare alla stessa pagina (deve vengono mostrati i file caricati), mi apre un frame sotto il modulo upload.... e accade aggiungendo la nuove funzione della progress bar, ossia questa parte:

HTML:
 <div class="progress" id="spindle">  
     <div class="bar"></div >  
     <div class="percent">0%</div >  
   </div>  
   <div id="status"></div>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>  
 <script src="http://malsup.github.com/jquery.form.js"></script>  
 <script>  
 (function() {  
 var bar = $('.bar');  
 var percent = $('.percent');  
 var status = $('#status');  
 $('form').ajaxForm({  
   beforeSend: function() {  
     status.empty();  
     var percentVal = '0%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   uploadProgress: function(event, position, total, percentComplete) {  
     var percentVal = percentComplete + '%';  
     bar.width(percentVal)  
     percent.html(percentVal);  
   },  
   complete: function(xhr) {  
     bar.width("100%");  
     percent.html("100%");  
     status.html(xhr.responseText);  
   }  
 });   
 })();      
 </script>  		
</div>


come posso evitarlo?
 
Ultima modifica:

Discussioni simili