Nodejs+formidable+express实现无刷新上传文件，同时进度条可视化显示

Nodejs无刷新上传文件+进度条可视化显示

实现的效果

先看看是不是你想要的那种效果，是的话就继续看吧，不是的话就可以划走了。

我这里是上传了一个JAVA的一个帮助文档，大小是26.4M，点击上传以后，整个页面不会刷新，同时进度条实时更新上传的进度。文件越大的话进度条显示的会越明显。

实现原理

1.无刷新上传
无刷新上传主要是用到了iframe标签实现的，让form提交结果转到iframe中，不转向其他URL，以此来实现无刷新上传。
2.进度条
进度条的话用到了两个东西，一个是Nodejs的第三方模块formidable，还有一个就是原生JS的window对象。formidable有一个progrss事件，可以实时监听上传的进度，通过window对象调用父窗口的进度条对象方法实时更新进度。

代码实现部分

1.无刷新上传

		姓名：

		图片:

		
		
	

2.进度条

app.post("/upload",function(req,res){
	var form=new formidable.IncomingForm();
    form.uploadDir="./upload";
	console.log("开始上传");
	// 这儿设置的Content-Type相当重要,
	// 一开始我就是设置成了text/plain,结果一直无法调用父窗口的方法
	res.writeHead(200,{"Content-Type":"text/html;charset=utf8"});
	var uploadStatus="uploading";//正在上传中
	form.on("progress",function(recivedByte,totalByte){
		//计算进度
		var percent=(recivedByte*100/totalByte).toFixed(2);
		//更新进度
		var option="";
		if(uploadStatus==="uploading") res.write(option);
		else{
			if(uploadStatus!="closed"){
				res.send();//结束本次连接
				uploadStatus="closed";
			} 
		}
	});
	// 开始解析表单数据
	form.parse(req,function(err,fields,files){
		var extName=path.extname(files.img.name);
		var oldName=__dirname+"/"+files.img.path;
		var newName=__dirname+"/upload/"+uuidv1()+extName;
		fs.rename(oldName,newName,function(err){
			if(err){
				console.log("上传失败");
				uploadStatus="err";
			}
			console.log("上传成功");
			uploadStatus="success";
		});
	});
});

相关文件

这个好像不能直接导入文件，那就只有等我把文件上传了，再把链接贴过来吧。
有相关问题的可以一起探讨一下哇。