HTML5 - Progress Bar για ανέβασμα αρχείων - δεν στέλνεται σωστά η φόρμα

[philos]

Γεια σας παιδιά

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

Έχω αφαιρέσει μεγάλα τμήματα κώδικα, για λόγους συντόμευσης.

 

HTML:

<script>
function _(el) {
    return document.getElementById(el);
}

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

}
function errorHandler(event) {
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
    _("status").innerHTML = "Upload Aborted";
}
</script>

<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="groupid" value="$file[groupid]" />
<font size="-3">Τίτλος</font><br />
  <input name="dname" id="dname" type="text" class="bginput" size="40" value="{$_POST['dname']}" />
<font size="-3" {$errors['author']}>Δημιουργός</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" {$unpinned}>{$vbphrase['no']}</option>
           <option value="1" {$pinned}>{$vbphrase['yes']}</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:300px;"></progress> 
         <h3 id="status"></h3> 
         <p id="loaded_n_total"></p>

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

PHP:

if ($_GET['do'] == 'add' OR $_GET['do'] == 'edit')
{
    if ($_POST['submit'] != '')
    {
     // [...] Έλεγχοι
        $_POST['dname'] = strip_tags($_POST['dname']);
        $_POST['author'] = strip_tags($_POST['author']);
    
        if (!isset($errors))
        {
      // [...] Ανέβασμα του αρχείου
      
            $_POST['desc'] = convert_url_to_bbcode($_POST['desc']);


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

        }
    }
}  
 

Παρατηρήσεις:

1. Οι παραπάνω κώδικες δουλεύουν κανονικά αν αφαιρέσω την progress bar και βάλω action στη φόρμα. Μόλις ανέβει το αρχείο, εμφανίζεται ένα μήνυμα σε κουτάκι και γίνεται 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 = _("dname");
    var author = _("author");        
    formdata.append("author", author);
    formdata.append("dname", dname);
    formdata.append("groupid", '$file[groupid]');
    formdata.append("do", '<if condition="$_GET['do'] == 'edit'">edit<else />add</if>');
    formdata.append("securitytoken", '$bbuserinfo[securitytoken]');
    formdata.append("id", '$file[id]');

Τι μπορώ να κάνω; Τη χρειάζομαι πολύ την progress bar! Επεξ/σία 30 Αυγούστου 2014 από philos