node实现http上传文件进度条 -我们到底能走多远系列(37)
我们到底能走多远系列(37)
扯淡:
又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定。共勉!
主题:
实现上传文件时,在页面中展现进度条的基本原理如图:
1,客户端先发起上传文件请求,上传文件未结束前,后台实时的把已经上传的百分比存进session中(也可以使用像redis这样的数据库)。
2,在上面这个过程中,客户端不断向服务端请求获取文件上传百分比,然后展现在页面上。
3,直到全部上传完毕,上传文件响应返回。
1,上传文件:
要实现上传文件进度条,先保证上传时页面不跳转,所以需要使用模拟ajax上传的方式。
这儿就使用了比较简单的ajaxupload,在以前的 文章中也有提到。
关于页面不跳转上传文件可以参考阮一峰的文章: 参考
2,将文件上传比例放入session
我这里使用了formidable,地址,利用下面的代码就可以监控上传过程:
form.on('progress', function(bytesReceived, bytesExpected) {
});
然后再里面将上传百分比放进session即可。这里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,页面上进度条的展现
这里使用了bootstrap
其中有一个Progress bars的插件:demo
下面代码就可以改变进度条的百分比了
$("#progress").css("width", progress +"%");
注意:这里不能使用attr方法,具体的区别是:
css设置style里的样式
attr设置属性
让我们继续前行
----------------------------------------------------------------------
努力不一定成功,但不努力肯定不会成功。
node实现http上传文件进度条 -我们到底能走多远系列(37)的更多相关文章
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- asp.net大文件上传与上传文件进度条问题
利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...
- php上传文件进度条
ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...
- 折叠面板实现,上传文件进度条,三级联选择器,多级联选择器, 利用layui实现
首先贴出html代码 <form class="layui-form" action=""> <div class="layui-f ...
- ajax上传文件进度条
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- html5异步上传图片显示上传文件进度条
<html> <head> </head> <body> <p> emo_album_id:<input type="tex ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...
随机推荐
- oracle Redhat64 安装错误3
问题描述 /usr/bin/ld: cannot find -lxxx 其中xxx即表示函式库文件名称,其命名规则是:lib+库名(即xxx)+.so. 可能原因: 1 安装了,但相对应的lib版本 ...
- AlarmManager手机闹钟简介
1.void set(int type , long triggerAtTime , PendingIntent operation ) : 设置在 triggerAtTime时间启动由operati ...
- java之代理模式
静态代理: java代理是一种模式--代理模式.采用代理模式,可以在不改变目标类代码的基础上,通过代理对象,来增加额外的功能(比如增加日志检测等)或者只需要目标对象的部分行为. java中,代理分为静 ...
- Thinking in java之正则表达式小例子
public static final String POEM= "Twas brilling, and the slithy toves\n" + "Did gyre ...
- Android的SwipeToDismiss第三方开源框架模拟QQ对话列表侧滑删除,置顶,将头像图片圆形化处理。
<Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github ...
- C# 数据流操作 Stream 相关
FileStream:對文件執行讀取與寫入 MemoryStream:對內存進行讀取與寫入 BufferedStream:對緩沖器進行讀取與寫入 StreamReader/StreamWriter 命 ...
- iphone判断当前网络连接类型
eachability只能区分出无网络.wifi和wwan(2G&2.5G&3G)类型的网络连接类型,只需重构networkStatusForFlags方法,即可详细区分出2G与3G网 ...
- 找不到库文件地址,修改修改方法framework
直接双击地址行修改
- (转)MyEclipse设置注释格式
原文:http://xinghaifeng2006.iteye.com/blog/1243565 MyEclipse设置注释格式(转载) 博客分类: Java基础知识 Windo ...
- hive 中 union all
hive 中的union all是不能在sql语句的第一层使用的,否则会报 Top level UNION is not supported currently 错误: 例如如下的方式: select ...