Pourquoi XMLHttpRequest ProgressEvent.lengthComputable pourrait-il être faux?

Je suis en train de mettre en œuvre une barre de progression de téléchargement HTML5 façon, en utilisant XMLHttpRequest support de niveau 2 pour le progrès des événements.

Dans chaque exemple, vous voyez, la méthode consiste à ajouter un écouteur d'événement pour l'événement progress comme suit:

req.addEventListener("progress", function(event) {
    if (event.lengthComputable) {
        var percentComplete = Math.round(event.loaded * 100 / event.total);
        console.log(percentComplete);
    }
}, false);

Ces exemples semblent toujours supposer que l'événement.lengthComputable sera vrai. Après tout, le navigateur sait la longueur de la demande, c'est de l'envoi, sûrement?

Peu importe ce que je fais, un événement.lengthComputable est faux. J'ai testé cela dans Safari 5.1.7 et Firefox 12, à la fois sur OSX.

Mon site est construit à l'aide de Django, et j'ai le même problème sur mon dev de production et de configurations.

Le code complet que j'utilise pour générer le formulaire de téléchargement est indiqué ci-dessous (à l'aide de jQuery):

form.submit(function() {
    //Compile the data.
    var data = form.serializeArray();
    data.splice(0, 0, {
        name: "file",
        value: form.find("#id_file").get(0).files[0]
    });
    //Create the form data.
    var fd = new FormData();
    $.each(data, function(_, item) {
        fd.append(item.name, item.value);
    });
    //Submit the data.
    var req = new XMLHttpRequest();
    req.addEventListener("progress", function(event) {
        if (event.lengthComputable) {
            var percentComplete = Math.round(event.loaded * 100 / event.total);
            console.log(percentComplete);
        }
    }, false);
    req.addEventListener("load", function(event) {
        if (req.status == 200) {
            var data = $.parseJSON(event.target.responseText);
            if (data.success) {
                console.log("It worked!")
            } else {
                console.log("It failed!")
            }
        } else {
            console.log("It went really wrong!")
        }
    }, false);
    req.addEventListener("error", function() {
        console.log("It went really really wrong!")
    }, false);
    req.open("POST", "/my-bar/media/add/");
    req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    req.send(fd);
    //Don't really submit!
    return false;
});

J'ai déchiré mes cheveux pendant des heures sur ce. Toute aide appréciée!

source d'informationauteur Dave

  1. 32

    Hey j'ai trouvé la réponse de @ComFreek:

    J'ai fait la même erreur.

    La ligne que j'ai écrite était:

    xhr.onprogress = uploadProgress;

    La bonne devrait être

    xhr.upload.onprogress = uploadProgress;
  2. 1

    prendre un coup d'oeil à ceci :
    https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

    xhr.le téléchargement.la méthode addEventListener('progrès',function(e) {}).

  3. 1

    J'ai aussi eu de problème avec l'envoi de plusieurs gros fichiers à l'aide d'AJAX (xmlhttprequest).

    Trouvé une solution et là est tout le script que j'utilise.
    Tous vous avez besoin est de placer la ligne suivante dans votre page HTML:

    <input type="file" multiple name="file" id="upload_file" onchange="handleFiles(this)">

    et l'utilisation de script suivante:

    <script type="text/javacript">
var filesArray;
function sendFile(file)
{
var uri = "<URL TO PHP FILE>";
var xhr = new XMLHttpRequest();
var fd = new FormData();
var self = this;
xhr.upload.onprogress = updateProgress;
xhr.addEventListener("load", transferComplete, false);
xhr.addEventListener("error", transferFailed, false);
xhr.addEventListener("abort", transferCanceled, false);
xhr.open("POST", uri, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText); //handle response.
}
};
fd.append('myFile', file);
//Initiate a multipart/form-data upload
xhr.send(fd);
}
function updateProgress (oEvent)
{
if (oEvent.lengthComputable)
{
var percentComplete = oEvent.loaded / oEvent.total;
console.log(Math.round(percentComplete*100) + "%");
} else {
//Unable to compute progress information since the total size is unknown
console.log("Total size is unknown...");
}
}
function transferComplete(evt)
{
alert("The transfer is complete.");
}
function transferFailed(evt)
{
alert("An error occurred while transferring the file.");
}
function transferCanceled(evt)
{
alert("The transfer has been canceled by the user.");
}
function handleFiles(element)
{
filesArray = element.files;
if (filesArray.length > 0)
{
for (var i=0; i<filesArray.length; i++)
{
sendFile(filesArray[i]);
}
filesArray = '';
}
}
</script>

    Votre résultat sera dans la console