• User Newbie

    Percentuale di progressione upload file

    Ciao a tutti, premetto che ho cercato a lungo una soluzione al problema su internet e sul forum, ma ho spesso trovato soluzioni vecchie e molto macchinose. (Io preferirei non utilizzare script pronti)

    Ho una pagina (in php) che permette attraverso un form HTML di effettuare l'upload di un file (nel mio caso *.zip). Quando l'utente clicca su "upload",attraverso uno script in javascript, appare un div nascosto con una gif animata e un testo "loading..." per far intendere che l'upload è in corso.
    Nel mio caso capita che alcuni utenti carichino file di grosse dimensioni quindi l'upload può durare diversi minuti; io quindi vorrei far in modo che oltre alla gif e al testo appaia una percentuale di caricamento (naturalmente sarebbe più carino avere una barra di progressione ma mi accontento anche della sola percentuale).

    pagina: upload.php

    [PHP]
    <FORM action="save.php" method="post" ENCTYPE="multipart/form-data" onSubmit="showSpindle()" >
    <INPUT type="file" size="46" name="zip" /><br><br>
    <INPUT TYPE="submit" VALUE="upload" style="width: 50px; margin-top: -5px;" />
    </FORM>

    <div class="pic" id="spindle" style="display:none">
    <img alt="Loading..." style="display:block;margin:20px 30px;" src="spindle.gif">
    <div id="loading_txt">Loading...</div>
    </div>
    [/PHP]

    script in javascript per far comparire il div nascosto una volta cliccato su "upload"

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


  • User

    Ho trovato uno script (php+javascript) che fa al caso tuo, sia che tu voglia adottarlo in blocco o che voglia guardare sotto il cofano come funziona 🙂

    L'indirizzo è: valums.com/ajax-upload/

    ciao!


  • User

    In pratica, da quel che sto leggendo, è supportato solo con l'HTML% e passando per l'XMLHttpRequest

    Ho trovato un tutorial e l'ho già messo tra i preferiti, che mi interessa la questione 🙂

    Il link: matlus.com/html5-file-upload-with-progress/


  • User Newbie

    ti ringrazio per la risposta.. in effetti quello script l'ho trovato diverse volte girovagando per google ed è l'unico che funziona abbastanza bene.. però cercavo di fare qualcosa di molto più semplice e penso che con le nuove versioni di php si possa fare.
    Ad esempio utilizzando delle funzioni nuove che funzionano su php 5.4 come:
    php.net/manual/en/session.upload-progress.php
    Purtroppo non posso testarla perchè il mio host ha una versione precedente di php e non ci posso metter mano.
    In ogni caso do uno sguardo al tutorial che hai postato magari si trova qualcosa di interessante