Ajax 文件上传，“进度”上传事件在 Edge 浏览器中不会触发

Ajax

实现Ajax文件上传时Edge浏览器中进度事件失效的问题

在Web开发中，文件上传是一个常见的需求，而Ajax技术的应用为实现无需刷新页面的文件上传提供了便捷的方式。然而，一些开发者在使用Ajax进行文件上传时可能会遇到一个问题：在Microsoft Edge浏览器中，进度上传事件似乎不会触发。在本文中，我们将深入探讨这个问题的原因，并提供一种解决方案。

问题描述

在一些情况下，开发者会使用XMLHttpRequest对象来实现文件上传，同时通过绑定"progress"事件来监听上传的进度。然而，在Microsoft Edge浏览器中，有用户反馈称该事件似乎不会触发，导致无法获取上传的进度信息。

问题根源

这个问题的根本原因在于Microsoft Edge浏览器对于XMLHttpRequest对象的一些特性支持不如其他主流浏览器。具体而言，Edge浏览器可能不会正确处理"progress"事件，从而导致进度信息无法被监听到。

解决方案

为了解决在Edge浏览器中进度上传事件不触发的问题，我们可以采用一种更为兼容的方案，即使用Fetch API。Fetch API是一种现代的替代XMLHttpRequest的网络请求方式，它更加强大、灵活，并且在大多数现代浏览器中得到了良好的支持，包括Microsoft Edge。

使用Fetch API的案例代码

Javascript
function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);
    fetch('/upload', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.JSon())
    .then(data => {
        // 处理上传成功的响应
        console.log('上传成功', data);
    })
    .catch(error => {
        // 处理上传失败的情况
        console.error('上传失败', error);
    });
}
// 监听文件选择框的变化
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    
    // 调用文件上传函数
    uploadFile(file);
});

上述代码通过Fetch API实现了文件上传的功能。在这个例子中，我们创建了一个FormData对象，将选中的文件附加到其中。然后，使用fetch函数发送POST请求，将FormData作为请求体传递给服务器。在上传过程中，Fetch API会自动触发"progress"事件，无需手动绑定事件监听器，因此解决了在Edge浏览器中"progress"事件失效的问题。

通过使用Fetch API，我们能够有效解决在Microsoft Edge浏览器中进度上传事件不触发的问题。这种替代方案不仅更为兼容，而且能够在现代Web开发中更好地适应不同浏览器的特性差异。希望本文对于遇到类似问题的开发者能够提供一些有益的参考。