文件上传进度事件未触发，尽管文件已上传。

Question

我在这里看到了一些与此类似的帖子，但似乎无法解决这个问题。基本上，我有一个AJAX文件上传器，似乎没有调用进度事件。其他事件都正常触发，文件上传的效果也正好符合我的预期，但进度事件却没有被调用。以下是Javascript代码：

$('input[name=avatar_upload]').change(function(e) {
    // Get the Form
    var setupForm = $('#setup-member-form');

    // Get the File Array
    var file = document.getElementById('avatar-upload').files[0];

    // Show the File Upload Progress
    $('#avatar-upload-progress').show();

    // Create a new Form Data Object
    var formData = new FormData();

    // Add the File
    formData.append('avatar', file);

    // Create the AJAX Object
    var ajax = new XMLHttpRequest();

    // Add the Event Listeners
    ajax.addEventListener("loadstart", function(evt) {
         // Do something in here...
         $('#output').append("upload starting...\n");
    }, false);
    ajax.addEventListener("progress", function(evt) {
         var percentLoaded = (evt.loaded / evt.total) * 100;
         $('#output').append(percentLoaded + "% loaded\n");
         $('#avatar-upload-progress .ui-progress-bar-inner').animate({'width' : percentLoaded + '%'}, 400);
    }, false);
    ajax.addEventListener("load", function(evt) {
         // Do something in here when loaded...
         $('#output').append("upload complete!");
    }, false);

    // Open the Form
    ajax.open("POST", $('input[name=upload_handler]').val());
    ajax.send(formData);
});

起初我以为可能是文件太小了，进度事件没有机会触发，但我已经尝试过更大的文件，加载事件会触发，然后会有几秒钟的暂停，然后完成事件会触发。

如果有任何想法，请告诉我！

- Andy Mills

Answer 1

我刚测试了一下，对于上传文件，你需要使用XMLHttpRequest.upload来附加事件，因为直接将事件附加到XMLHttpRequest上只会在上传时触发一次。

这也在MDN文档中有解释。

$('#avatar-upload').on('change', function () {
    var file = document.getElementById('avatar-upload').files[0];

    $('#avatar-upload-progress').show();
    var formData = new FormData();
    formData.append('avatar', file);

    var ajax = new XMLHttpRequest();

    ajax.upload.addEventListener("loadstart", function (evt) {
        $('#output').append("upload starting...\n");
    }, false);

    ajax.upload.addEventListener("progress", function (evt) {
        var percentLoaded = (evt.loaded / evt.total) * 100;
        $('#output').append(percentLoaded + "% loaded\n");
        $('#avatar-upload-progress .ui-progress-bar-inner').animate({
            'width': percentLoaded + '%'
        }, 400);
    }, false);

    ajax.upload.addEventListener("load", function (evt) {
        $('#output').append("upload complete!");
    }, false);

    ajax.open("POST", $('input[name=upload_handler]').val());
    ajax.send(formData);
});

- adeneo

---

在我的情况下，我正在使用XMLHttpRequest.upload，但它仍然没有触发。只有当我通过在脚本中放置单词“debugger;”来强制停止调试器时，它才会触发，否则它就会直接跳过。 - Vincent

Answer 2

在我的情况下，问题出在我创建XMLHttpRequest对象的方式上。结果发现我漏掉了“window”对象。我原本是这样写的：

requestObject = new XMLHttpRequest();
requestObject.upload.addEventListener('progress', videoUploadProgress, false);

并将其更改为：

requestObject = new window.XMLHttpRequest();
requestObject.upload.addEventListener('progress', videoUploadProgress, false);

现在它可以工作了。

- Vincent