Comment faire pour afficher la barre de progression de l'upload de fichier en ajax

Mon code post requête ajax mais ce n'est pas avec une barre de progression. S'il vous plaît aider à corriger le code pour afficher de travail de la barre de progression.

$(document).ready(function () {
    $("#uploadbutton").click(function () {
    var filename = $("#file_path$i").val(); //get form data;

    $.ajax({
      type: "html",
      url: "share.php",//onwhich post ajax data;
      enctype: 'multipart/form-data',
      data: {
        file: filename
      },
      success: function () {
        alert("Data Uploaded: ");
      }
    });
 });
});

OriginalL'auteur user2060312 | 2013-02-11

  1. 2

    @whitneyit : on peut l'utiliser xhr: la fonction de l'ajax pour suivre le chargement du fichier à quelque chose comme ceci

    $.ajax({
                url: 'handler/FileUploader.ashx?FileName=' + file.name, //server script to process data
                type: 'POST',
                xhr: function () {
                    myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                    }
                    return myXhr;
                },
                success: function (result) {                    
                    //On success if you want to perform some tasks.
                },
                data: file,
                cache: false,
                contentType: false,
                processData: false
            });
            function progressHandlingFunction(e) {
                if (e.lengthComputable) {
                    var s = parseInt((e.loaded / e.total) * 100);
                    $("#progress" + currFile).text(s + "%");
                    $("#progbarWidth" + currFile).width(s + "%");
                    if (s == 100) {
                        triggerNextFileUpload();
                    }
                }
            }

    OriginalL'auteur Samuel Joy

  2. 1

    C'est à partir de BlueImp de jQuery-File-Upload:

    Tout d'abord, téléchargez: https://github.com/blueimp/jQuery-File-Upload/archives/master

    Maintenant, télécharger le dossier js.

    Faire votre .html:

        <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery File Upload Example</title>
    <style>
     .bar {
         height: 18px;
         background: green;
      }
    </style>
    </head>
    <body>
    <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
    <div id="progress">
       <div class="bar" style="width: 0%;"></div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/vendor/jquery.ui.widget.js"></script>
    <script src="js/jquery.iframe-transport.js"></script>
    <script src="js/jquery.fileupload.js"></script>
    <script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            }
        });
progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
    });
    </script>
    </body> 
    </html>

    Je n'ai pas testé, mais il DEVRAIT être fonctionnel. Laissez-moi savoir si il ne l'est pas.

    Facultatif: ajoutez le contenu de <style></style> dans votre .fichier css.

    Facultatif: Ajoutez .js dans un .js <script src=""></script> tag.

    Source: https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

    OriginalL'auteur Pachonk

  3. 0

    Malheureusement, le $.ajax méthode ne renvoie pas les progres de l'information.

    Aussi, il n'y a pas de crossbrowser solution à cela en utilisant seulement le HTML et le JavaScript. Je suggère de regarder à Uploadify.

    OriginalL'auteur whitneyit