Integrare una progress bar su form upload...

di il
3 risposte

Integrare una progress bar su form upload...

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>
[/HTML]
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>";
}
}
}
}
}


[/PHP]
Potete aiutarmi indicandomi un metodo semplice????

3 Risposte

  • Re: Integrare una progress bar su form upload...

    Ciao ho messo il tuo script tra i tag code, che dici si legge meglio no?

    Per la faccenda della progress bar, ti giro questo link:
    http://blueimp.github.io/jQuery-File-Upload/index.htm
  • Re: Integrare una progress bar su form upload...

    In quel link c'è un uploader completo a me interessa solo integrare una prograss bar sul mio uploader...
  • Re: Integrare una progress bar su form upload...

    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=">
    <script src=">
    <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>[/HTML]

    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????
Devi accedere o registrarti per scrivere nel forum
3 risposte