XMLHttpRequest上传进度监听器仅调用一次

时间:2018-06-29 20:07:48

标签: javascript xmlhttprequest

为什么即使对于大文件(几MB),我的progress侦听器也只能被调用一次?

我的示例代码:

let form = document.getElementById('form');
let fileInput = form.elements['file'];

fileInput.addEventListener('change', function() {
    let file = fileInput.files[0];
    let request = new XMLHttpRequest();

    request.addEventListener('progress', function(e) {
        let p = e.lengthComputable ? (e.loaded/e.total*100) : 0;
        console.log('Download progress: ' + p);
    });

    request.upload.addEventListener('progress', function(e) {
        let p = e.lengthComputable ? (e.loaded/e.total*100) : 0;
        console.log('Upload progress: ' + p);
    });

    let formData = new FormData();
    formData.append('file', file, file.name);

    request.open('POST', form.action);
    request.send(formData);
});

HTML:

<form
    id="form"
    action="http://192.168.0.186:5000/upload.php"
>
    <input name="file" type="file" multiple accept="image/*">
</form>

控制台中的输出:

Upload progress: 100
Download progress: 0

0 个答案:

没有答案