通过Node实现http上传文件进度条

实现上传文件时，在页面中展现进度条的基本原理如图：




1、客户端先发起上传文件请求，上传文件未结束前，后台实时的把已经上传的百分比存进session中（也可以使用像redis这样的数据库）。

2、在上面这个过程中，客户端不断向服务端请求获取文件上传百分比，然后展现在页面上。

3、直到全部上传完毕，上传文件响应返回。

1、上传文件：

要实现上传文件进度条，先保证上传时页面不跳转，所以需要使用模拟ajax上传的方式。

这儿就使用了比较简单的ajaxupload,关于页面不跳转上传文件可以参考阮一峰的文章: 参考

2、将文件上传比例放入session

　　我这里使用了formidable 地址，利用下面的代码就可以监控上传过程：

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

然后再里面将上传百分比放进session即可。

上传文件的代码：

exports.jupload = function(sessions){
console.log("jupload");
return function(req, res) {
var form = new formidable.IncomingForm();
form.uploadDir = __dirname;
form.parse(req, function(err, fields, files) {
//res.writeHead(200, {'content-type': 'text/plain'});
//res.write('Received upload:\n\n');
var exts = files.ajaxfile.name.split('.');
var ext = exts[1];
var date = new Date();
var ms = Date.parse(date);
fs.renameSync(files.ajaxfile.path, __dirname +"/uploadfiletmp/" + ms +"." + ext);
});
var opts = {
name : "uploadprogress",
value : 0,
expires : 500
};

sessions.setSession(req,res,opts);
//文件上传中事件
form.on("progress", function (bytesReceived, bytesExpected) {
//console.log("progress!" + bytesReceived +"____" + bytesExpected);
// 百分比
var percent = Math.round(bytesReceived/bytesExpected * 100);
var opts = {
name : "uploadprogress",
value : percent,
expires : 500
};
// 存入
sessions.setSession(req,res,opts);
});
form.on('end', function() {
res.render("upload",{data : ""});
});
};
// form.on("complete", function (err) {
// console.log("complete!");
// });
};

注意：上面的代码中监听的end事件，等到上传结束时才进行返回操作，是为了避免重新写headers的错误：

http.js:704
    throw new Error('Can\'t set headers after they are sent.');
          ^
Error: Can't set headers after they are sent.

3、客户端不断请求获取文件上传百分比

我们只要在页面上弄个定时，发起ajax请求百分比，然后判断百分比如果达到100，而停止。

下面是两个请求的js代码：

function aupload(fileElementId){
$("#progress").css("width", "0%");
// 发起上传文件请求
$.ajaxFileUpload({
url:"/jupload",
fileElementId:fileElementId,
success:function(){
alert("上传成功");
}
});
// 获取文件上传百分比
getUploadProgress();
}

function getUploadProgress(){
var progress = 0;
$.ajax({
url : "/uploadprogress",
dataType: "json",
success:function(msg){
//百分比
progress = msg.progress;
$("#progress").css("width", progress +"%");
if(progress < 100){
// 继续调用
setTimeout("getUploadProgress('/uploadprogress')",1);
}
}
})
}

以及后台返回进度百分比的代码：

exports.uploadprogress = function(sessions){
return function(req, res) {
// 从session中获取
var progress = sessions.getSession(req, "uploadprogress");
console.log(progress+"---------------------");
res.send({"progress":progress});
}
};

4、页面上进度条的展现

这里使用了[b]bootstrap[/b]

其中有一个Progress bars的插件：demo

下面代码就可以改变进度条的百分比了

$("#progress").css("width", progress +"%");

注意：这里不能使用attr方法，具体的区别是：

css设置style里的样式

attr设置属性
通过以上四步，我们就通过Node.Js实现了上传文件时显示进度条，但在此过程中大家可能比较关注浏览器兼容性问题，对于此问题,

ajaxupload + bootstrap 完全可以解决，大家不同担心.