Node.js实现兼容IE789的文件上传进度条

文件上传进度条在旧版IE浏览器中的实现

对于经常需要上传图片或大型文件的职场人来说，文件上传进度条的兼容性问题是一大挑战。尤其在IE7、IE8、IE9等较低版本的浏览器中，通常会借助Flash技术来解决这一问题。并非所有人都愿意为了适配老旧的IE浏览器而去学习Flash技术。那么，如何实现这些浏览器的文件上传进度条呢？接下来，让我们跟随狼蚁网站SEO优化的脚步，一竟。

在Node.js环境下处理文件上传时，我们通常会遇到一些挑战。在Express4中，req.files已经不再适用。目前，formidable成为了最受欢迎的解决方案之一。它提供了一个progress事件，让我们有可能在低版本IE中实现进度条功能。

以下是基本的代码示例：

当表单上传触发progress事件时，我们可以监听该事件并处理上传进度。例如：

```javascript

form.on('error', function(err) {

console.log('Error occurred:', err);

})

.on('aborted', function() {

console.log('Upload aborted.');

})

.on('progress', function(bytesReceived, bytesExpected) {

var progressPercentage = parseFloat(bytesReceived / bytesExpected).toFixed(2) 100;

console.log('Progress: ' + progressPercentage + '%');

});

```

仅仅在控制台打印进度值是不够的。我们希望能够在页面上实时显示上传进度。为了实现这一点，我们可以通过调用父窗口的JavaScript函数来更新进度。例如：

```javascript

form.on('progress', function(bytesReceived, bytesExpected) {

var progressPercentage = parseFloat(bytesReceived / bytesExpected).toFixed(2) 100;

res.write('');

});

```

这种方法只能看到最终的上传百分比，无法看到详细的上传进度。为了解决这个问题，我们可以考虑将进度值保存到session中，并通过额外的请求轮询这个进度值。为了确保请求的进度值与本次上传的进度值对应，我们需要在上传请求和额外请求中约定一个token值。关于如何获取这个token值，由于文件上传的请求体在Request Payload中，所以无法通过req.body获取。考虑到实用性和便捷性，我们可以选择将token值放在cookie中。

在前端与后端的交互中，我们经常需要处理cookies和session来确保用户的状态。在处理文件上传时，进度的显示尤为关键。让我们来深入理解并生动描述这段处理文件上传进度的代码。

一、关于Cookies的处理

我们需要从请求头中获取cookie，并将其为一个对象。这个过程就像一个包含多个键值对的字符串。每一个键值对代表一个cookie，键是cookie的名字，值是它的内容。这个过程看似简单，但却是确保后续操作顺利进行的关键。

二、关于文件上传进度的处理

当文件正在上传时，我们会监听一个名为'progress'的事件。这个事件会告诉我们已经接收到的字节数和预期的字节数。通过这两个数据，我们可以计算出上传的百分比。这个百分比会被存储在session中，以便我们能够在任何时候查看上传的进度。

我们发现一个问题：在session中的进度值只有在文件上传完毕后才有。这意味着我们只能看到100%的进度，而无法看到详细的进度值。为此，我们开始考虑其他的解决方案。

三、解决方案的与实施

我们尝试将数据保存在global对象中，而不是session中。我们发现，这种方法确实解决了问题。每当文件上传有进度时，我们都会更新global对象中对应的进度值。这样，通过ajax轮询，我们就可以实时获取到上传的进度，而不再只是看到100%的进度。

四、心情的流露

在整个过程中，我们经历了许多思考和尝试。每次遇到问题时，我们都会感到焦虑和无助。当我们找到解决方案时，那种喜悦和成就感是无法言喻的。我们不断地尝试、失败、再尝试，终于让文件上传的进度能够实时显示，这一切的努力都是值得的。

我们成功地解决了文件上传进度无法实时显示的问题。通过保存在global对象而不是session中，我们能够实时获取到上传的进度。这个过程虽然曲折，但每一次的尝试和成功都让我们更加成熟和自信。我们期待未来更多的挑战，因为这正是我们成长的机会。在浏览网页时，Chrome等现代浏览器为我们带来了一种顺畅无比的HTML5体验。当我们谈论文件上传进度时，我们几乎可以实时看到上传的进度条在屏幕上滚动。在古老的IE浏览器中，如IE7、IE8和IE9，我们可能会遇到一些卡顿的感觉。尽管这些老浏览器依然能够展示上传进度，但它们的反应速度显然不如现代浏览器那么迅速和流畅。这就像是在用老旧的机器播放高清视频一样，虽然仍然可以播放，但流畅度却大打折扣。

每当我们开始上传文件时，我们都会在global对象中添加新的值。这就像是我们的数字世界中的一个小小堆积。久而久之，这些堆积可能会变得庞大且杂乱无章。当文件上传完毕并成功转移到指定目录后，我们需要清理这些堆积。我们可以设置global['file'+queryToken]=null来清空这些不再需要的值。

轮询是一种连续发送多个请求的方式，就像是在等待某个事件发生时不断询问服务器一样。虽然这种方式确实能够解决问题，但过度使用可能导致大量的资源被占用和消耗。为了避免这种情况，我们可以限制轮询的频率，例如每隔500毫秒才请求一次进度值。这样，我们就可以在保持功能的减少资源的浪费。对于IE7、IE8和IE9的用户来说，由于它们的浏览器性能限制，我们决定采用这种方式来解决上传进度条卡顿的问题。我们也正在努力摆脱对flash的依赖，让网页更加简洁和高效。虽然轮询方式可以兼容所有浏览器，但我们仍然需要根据浏览器的类型来选择最合适的方式。对于非IE系列浏览器，我们仍然推荐使用HTML5的方式来实现文件上传功能。

那么问题就来了，我们是应该使用额外的flash上传功能来增加请求数量呢？还是选择一个更加简洁的方式呢？我个人更倾向于后者。虽然我对flash并不熟悉，但我始终认为在页面上添加额外的文件并不是一个好的选择。对于文件上传组件的处理，还有很多细节需要考虑和规划。为了使这个组件更加通用和可复用，我决定将其作为一个独立的页面来处理。任何需要上传文件的地方都可以使用iframe来实现这个页面，这绝对比使用一个JS文件要好得多。希望这篇文章能够为大家带来一些帮助和启示。如果有任何疑问和建议，请随时留言交流。让我们共同学习和进步！