我们到底能走多远系列(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)的更多相关文章

  1. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  2. asp.net大文件上传与上传文件进度条问题

    利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...

  3. php上传文件进度条

    ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...

  4. 折叠面板实现,上传文件进度条,三级联选择器,多级联选择器, 利用layui实现

    首先贴出html代码 <form class="layui-form" action=""> <div class="layui-f ...

  5. ajax上传文件进度条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. html5异步上传图片显示上传文件进度条

    <html> <head> </head> <body> <p> emo_album_id:<input type="tex ...

  7. atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

    atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...

  8. 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 ...

  9. Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...

随机推荐

  1. oracle Redhat64 安装错误3

    问题描述 /usr/bin/ld: cannot find -lxxx 其中xxx即表示函式库文件名称,其命名规则是:lib+库名(即xxx)+.so. 可能原因:  1 安装了,但相对应的lib版本 ...

  2. AlarmManager手机闹钟简介

    1.void set(int type , long triggerAtTime , PendingIntent operation ) : 设置在 triggerAtTime时间启动由operati ...

  3. java之代理模式

    静态代理: java代理是一种模式--代理模式.采用代理模式,可以在不改变目标类代码的基础上,通过代理对象,来增加额外的功能(比如增加日志检测等)或者只需要目标对象的部分行为. java中,代理分为静 ...

  4. Thinking in java之正则表达式小例子

    public static final String POEM= "Twas brilling, and the slithy toves\n" + "Did gyre ...

  5. Android的SwipeToDismiss第三方开源框架模拟QQ对话列表侧滑删除,置顶,将头像图片圆形化处理。

      <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github ...

  6. C# 数据流操作 Stream 相关

    FileStream:對文件執行讀取與寫入 MemoryStream:對內存進行讀取與寫入 BufferedStream:對緩沖器進行讀取與寫入 StreamReader/StreamWriter 命 ...

  7. iphone判断当前网络连接类型

    eachability只能区分出无网络.wifi和wwan(2G&2.5G&3G)类型的网络连接类型,只需重构networkStatusForFlags方法,即可详细区分出2G与3G网 ...

  8. 找不到库文件地址,修改修改方法framework

    直接双击地址行修改

  9. (转)MyEclipse设置注释格式

    原文:http://xinghaifeng2006.iteye.com/blog/1243565 MyEclipse设置注释格式(转载)          博客分类: Java基础知识   Windo ...

  10. hive 中 union all

    hive 中的union all是不能在sql语句的第一层使用的,否则会报 Top level UNION is not supported currently 错误: 例如如下的方式: select ...