进度条上传文件答案

【问题标题】：Progress bar upload file进度条上传文件
【发布时间】：2018-06-21 18:53:04
【问题描述】：

我有一个带有 AJAX 和 jQuery 的简单 PHP 上传表单。我想显示上传进度。

我已经尝试过这些代码，但我在控制台中看到了该错误： 无法读取未定义的属性“addEventListener”

     $(document).ready(function(){

                //Traitement du formulaire come_from changement des informations d'introduction
      $("#file").submit(function() {

               $.ajax({
                      type: 'POST',
                      url: "includes/profile_includes/func_infos.php",
                      data: {
                        "change_back": " "
                      },
                      beforeSend: function(XMLHttpRequest)
                      {
                        //Upload progress
                        XMLHttpRequest.upload.addEventListener("progress", function(evt){
                          if (evt.lengthComputable) {  
                            var percentComplete = evt.loaded / evt.total;
                            //Do something with upload progress
                            console.log(percentComplete);
                          }
                        }, false); 

                      },
                      success: function(data){
                        alert('done');
                      }
             });
  }); 
});

还有那个html

 <form  id="file" onsubmit="return false">
    <input type="file" name="file">
    <input type="submit" name="submit">
</form>

这是我的 PHP 代码，路径：includes/profile_includes/func_infos.php

    if(isset($_POST['change_back'])){
   if (isset($_FILES['image_couverture']) AND $_FILES['image_couverture']['error'] == 0) {
        // Testons si le fichier n'est pas trop gros
        if ($_FILES['image_couverture']['size'] <= 1000000) {
            // Testons si l'extension est autorisée
            $infosfichier = pathinfo($_FILES['image_couverture']['name']);
            $extension_upload = strtolower($infosfichier['extension']);
            $extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png','bmp');
            require("includes/common_includes/connect_db.php");
            $q=$bdd->prepare('SELECT id FROM users WHERE id = :id AND password = :password');
                             $q->execute(array(
                                'id'       => infos_profile()->id,
                                'password' => $_SESSION['password']
                                ));
            $row = $q->fetch(PDO::FETCH_OBJ);
            if (in_array($extension_upload, $extensions_autorisees)) {
                // On peut valider le fichier et le stocker définitivement
                move_uploaded_file($_FILES['image_couverture']['tmp_name'], '../members/'.$row->id.'/back/'.basename($_FILES['image_couverture']['name']));
                require("includes/common_includes/connect_db.php");
                           $nom = $_FILES['image_couverture']['name'];
                            $req = $bdd->prepare('UPDATE users SET back = :back  WHERE id= :id AND password = :password');
                      $req->execute(array(
                        'back' => $nom,
                        'id' => infos_profile()->id,
                        'password' => $_SESSION['password']
                      ));
                      echo "success";
            }else{
              echo "echec";
            }
        }
    }
}

有人可以帮助我吗？如何解决该错误并显示上传进度？

【问题讨论】：

标签： jquery ajax forms

【解决方案1】：

试试这个...

$(document).ready(function(){
    //Traitement du formulaire come_from changement des informations d'introduction
    $("#file").submit(function() {
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                //upload progress
                xhr.upload.addEventListener("progress", function(evt){
                    if (evt.lengthComputable) {
                        var percent = evt.loaded / evt.total;
                        //upload progress
                        console.log(percent);
                    }
                }, false);
                //download progress
                xhr.addEventListener("progress", function(evt){
                    if (evt.lengthComputable) {
                        var percent = evt.loaded / evt.total;
                        //download progress
                        console.log(percent);
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: "includes/profile_includes/func_infos.php",
            data: {
                "change_back": " "
            },
            success: function(data){
                alert('done');
            }
        });
    }); 
});

【讨论】：