HTML5 - Progress Bar για ανέβασμα αρχείων

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
philos
Δημοσιεύσεις: 260
Εγγραφή: 30 Αύγ 2007 23:32

HTML5 - Progress Bar για ανέβασμα αρχείων

Δημοσίευση από philos » 30 Αύγ 2014 12:49

Γεια σας παιδιά :-)
Λοιπόν, έχω τους εξής κώδικες HTML και PHP για ανέβασμα αρχείων (είναι από μηχανή vbulletin), σας παραθέτω τα σχετικά χωρία. Μέσα στον HTML έχω προσαρμώσει και Javascript που αφορά μια progress bar καθώς ανεβαίνει το αρχείο.
Έχω αφαιρέσει μεγάλα τμήματα κώδικα, για λόγους συντόμευσης.

HTML:

Κώδικας: Επιλογή όλων

<script>
function _&#40;el&#41; &#123;
    return document.getElementById&#40;el&#41;;
&#125;

function uploadFile&#40;&#41; &#123;
    var file = _&#40;"upload"&#41;.files&#91;0&#93;;
    //alert&#40;file.name + " | " + file.size + " | " + file.type&#41;;
    var formdata = new FormData&#40;&#41;;
    formdata.append&#40;"upload", file&#41;;
    var ajax = new XMLHttpRequest&#40;&#41;;
    ajax.upload.addEventListener&#40;"progress", progressHandler, false&#41;;
    ajax.addEventListener&#40;"load", completeHandler, false&#41;;
    ajax.addEventListener&#40;"error", errorHandler, false&#41;;
    ajax.addEventListener&#40;"abort", abortHandler, false&#41;;
    ajax.open&#40;"POST", "downloads.php"&#41;;
    ajax.send&#40;formdata&#41;;
&#125;
function progressHandler&#40;event&#41; &#123;
    _&#40;"loaded_n_total"&#41;.innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
    var percent = &#40;event.loaded / event.total&#41; * 100;
    _&#40;"progressBar"&#41;.value = Math.round&#40;percent&#41;;
    _&#40;"status"&#41;.innerHTML = Math.round&#40;percent&#41; + "% uploaded... please wait";
&#125;
function completeHandler&#40;event&#41; &#123;
    _&#40;"status"&#41;.innerHTML = event.target.responseText;
    _&#40;"progressBar"&#41;.value = 0;

&#125;
function errorHandler&#40;event&#41; &#123;
    _&#40;"status"&#41;.innerHTML = "Upload Failed";
&#125;
function abortHandler&#40;event&#41; &#123;
    _&#40;"status"&#41;.innerHTML = "Upload Aborted";
&#125;
</script>

<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="hidden" name="s" value="$session&#91;sessionhash&#93;" />
<input type="hidden" name="securitytoken" value="$bbuserinfo&#91;securitytoken&#93;" />
<input type="hidden" name="groupid" value="$file&#91;groupid&#93;" />
<font size="-3">Τίτλος</font><br />
  <input name="dname" id="dname" type="text" class="bginput" size="40" value="&#123;$_POST&#91;'dname'&#93;&#125;" />
<font size="-3" &#123;$errors&#91;'author'&#93;&#125;>Δημιουργός</font><br />
  <textarea id="pmrecips_txt" name="author" id="author" rows="1" cols="50" tabindex="1"></textarea>
          <font size="-3">Καρφίτσωμα</font><br />
          <select name="pin">
           <option value="0" &#123;$unpinned&#125;>&#123;$vbphrase&#91;'no'&#93;&#125;</option>
           <option value="1" &#123;$pinned&#125;>&#123;$vbphrase&#91;'yes'&#93;&#125;</option>
          </select>       
<br />				
       <font size="-3">Αρχείο...</font><br />
       <input name="upload" id="upload" type="file" size="20" /><br />
         <progress id="progressBar" value="0" max="100" style="width&#58;300px;"></progress> 
         <h3 id="status"></h3> 
         <p id="loaded_n_total"></p>

  <div style="margin-top&#58;6px">
   <input class="button" onclick="uploadFile&#40;&#41;;" name="submit" value="Προσθήκη Αρχείου" />
  </div>
</form>

PHP:

Κώδικας: Επιλογή όλων

if &#40;$_GET&#91;'do'&#93; == 'add' OR $_GET&#91;'do'&#93; == 'edit'&#41;
&#123;
    if &#40;$_POST&#91;'submit'&#93; != ''&#41;
    &#123;
     // &#91;...&#93; Έλεγχοι
        $_POST&#91;'dname'&#93; = strip_tags&#40;$_POST&#91;'dname'&#93;&#41;;
        $_POST&#91;'author'&#93; = strip_tags&#40;$_POST&#91;'author'&#93;&#41;;
    
        if &#40;!isset&#40;$errors&#41;&#41;
        &#123;
      // &#91;...&#93; Ανέβασμα του αρχείου
      
            $_POST&#91;'desc'&#93; = convert_url_to_bbcode&#40;$_POST&#91;'desc'&#93;&#41;;


            if &#40;$_GET&#91;'do'&#93; == 'add' AND !isset&#40;$errors&#41;&#41;
            &#123;
                $result = $db->query_write&#40;"INSERT INTO " . TABLE_PREFIX . "dl_files &#40;`name`, `groupid`, `type`, `description`, `author`, `_author`, `uploader`, `uploaderid`, `url`, `date`, `category`, `size`, `pin`, `purgatory`, `link`&#41;
                                            VALUES&#40;".
                                                $db->sql_prepare&#40;$_POST&#91;'dname'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$_POST&#91;'groupid'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$_FILES&#91;'upload'&#93;&#91;'type'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$_POST&#91;'desc'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$_POST&#91;'author'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$_author&#41;.", ".
                                                $db->sql_prepare&#40;$vbulletin->userinfo&#91;'username'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$vbulletin->userinfo&#91;'userid'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$newfilename&#41;.", ".
                                                $db->sql_prepare&#40;TIMENOW&#41;.", ".
                                                $db->sql_prepare&#40;$_POST&#91;'category'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$size&#41;.", ".
                                                $db->sql_prepare&#40;$_POST&#91;'pin'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$_POST&#91;'purgatory'&#93;&#41;.", ".
                                                $db->sql_prepare&#40;$link&#41;.
                                            "&#41;"
                                        &#41;;
                            $id = $db->insert_id&#40;&#41;;                                                        
            &#125;
            else if &#40;$_GET&#91;'do'&#93; == 'edit'&#41;
            &#123;        
                $result = $db->query_write&#40;"UPDATE " . TABLE_PREFIX . "dl_files SET `name`=".$db->sql_prepare&#40;$_POST&#91;'dname'&#93;&#41;.
                                                ",`description`=".$db->sql_prepare&#40;$_POST&#91;'desc'&#93;&#41;.
                                                ",`author`=".$db->sql_prepare&#40;$_POST&#91;'author'&#93;&#41;.        
                                                ",`groupid`=".$db->sql_prepare&#40;$_POST&#91;'groupid'&#93;&#41;.
                                                ",`type`=".$db->sql_prepare&#40;$filetype&#41;.
                                                ",`_author`=".$db->sql_prepare&#40;$_author&#41;.
                                                ",`url`=".$db->sql_prepare&#40;$newfilename&#41;.
                                                ",`category`=".$db->sql_prepare&#40;$_POST&#91;'category'&#93;&#41;.
                                                ",`size`=".$db->sql_prepare&#40;$size&#41;.
                                                ",`pin`=".$db->sql_prepare&#40;$_POST&#91;'pin'&#93;&#41;.
                                                ",`purgatory`=".$db->sql_prepare&#40;$_POST&#91;'purgatory'&#93;&#41;.
                                                ",`link`=".$db->sql_prepare&#40;$link&#41;
                                                ." WHERE `id`=".$db->sql_prepare&#40;$_GET&#91;'id'&#93;&#41;&#41;;
                                                
            &#125;
      
            if &#40;$_GET&#91;'do'&#93; == 'add' AND !isset&#40;$errors&#41;&#41;
            &#123;     
        if &#40;$show&#91;'guest'&#93;&#41;
        &#123;
            $vbulletin->url = './index.php';
            eval&#40;print_standard_redirect&#40;'Ευχαριστούμε! Αναμονή για έγκριση...', false, true&#41;&#41;;
        &#125;
        else
        &#123;
            eval&#40;print_standard_redirect&#40;'Το αρχείο προστέθηκε!', false, true&#41;&#41;;
        &#125;
                
            &#125;
            else
            &#123;
                if &#40;!isset&#40;$errors&#41;&#41;
                &#123;
                    $vbulletin->url = 'downloads.php?do=file&id='.$_GET&#91;'id'&#93;;
                    eval&#40;print_standard_redirect&#40;'ecdownloads_msg_file_edited', true, true&#41;&#41;;
                &#125;
            &#125;

        &#125;
    &#125;
&#125;  
 

Παρατηρήσεις:
1. Οι παραπάνω κώδικες δουλεύουν κανονικά αν αφαιρέσω την progress bar και βάλω action στη φόρμα + type=submit στο button. Μόλις ανέβει το αρχείο, εμφανίζεται ένα μήνυμα σε κουτάκι και γίνεται redirect.
2. Με τους παραπάνω κώδικες, όταν πατάω το κουμπί που έχει την onclick, η progress bar αρχίζει να δείχνει τι ανεβαίνει, όμως το αρχείο δεν φτάνει ποτέ στο φάκελο που πρέπει στον server ούτε ενημερώνεται η βάση δεδομένων με new line στο πίνακα dl_files.
3. Άλλο ένα "κακό" είναι ότι μόλις η progress bar πάει στο 100%, αντί να αλλάζει σελίδα ο χρήστης, με redirect, γίνεται το εξής: σαν μέσα σε iframe εμφανίζεται η σελίδα /downloads.php, ενώ κανονικά ο χρήστης θα έπρεπε να δεχόταν redirect (δλδ ολική αλλαγή σελίδας στα: )
$vbulletin->url = 'downloads.php?do=file&id='.$_GET['id'];
ή
$vbulletin->url = './index.php';

Προφανώς δε στέλνονται σωστά τα στοιχεία της φόρμας. Δοκίμασα να προσθέσω κι αυτές τις γραμμές στη javascript αλλά δεν άλλαξε κάτι:

Κώδικας: Επιλογή όλων

    var dname = _&#40;"dname"&#41;;
    var author = _&#40;"author"&#41;;        
    formdata.append&#40;"author", author&#41;;
    formdata.append&#40;"dname", dname&#41;;
    formdata.append&#40;"groupid", '$file&#91;groupid&#93;'&#41;;
    formdata.append&#40;"do", '<if condition="$_GET&#91;'do'&#93; == 'edit'">edit<else />add</if>'&#41;;
    formdata.append&#40;"securitytoken", '$bbuserinfo&#91;securitytoken&#93;'&#41;;
    formdata.append&#40;"id", '$file&#91;id&#93;'&#41;;
Τι μπορώ να κάνω; Τι χρειάζομαι πολύ την progress bar! :)

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης