[Node.js] 使用File API 异步上传文件
原文地址:http://www.moye.me/2014/11/05/html5-filereader/
最近在做一个网盘的项目,不出意外的涉及到大文件的上传,那么问题来了:如何实时的显示文件上传的进度?
问题分解
似乎是老生常谈,几年前我做过类似的功能模块(基于.NET平台),方案思路:
- 基于表单提交
- Server端根据上传文件分配标识符(GUID)并进行流式读取
- Browser端发起Ajax拉取文件上传状态
这种方案的问题是受制于文件大小(最大2G)。所谓文件上传进度的实时显示,个人觉得比较理想的方案是:
- Browser 端需要告诉Server文件的大小
- Browser 端需要能对文件分块读取
- Server 端需要根据接收到的块及文件大小计算出进度,并告知Browser端
- Browser 端在进度未完成时,继续读取分块上传
HTML5 File API
上述方案中,最大的难点在于Browser端分块读取文件。好在HTML5 File API提供了这样的接口:FileReader
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象……
有意思的是Blob接口,它只有一个方法:slice()——不难想象,它是用进行数据分块的,方法签名形如:
Blob slice(
optional long long start,
optional long long end,
optional DOMString contentType
};
从W3C Draft 可以看出,File 接口实际上是继承自Blob接口的,意味着File.slice(start, end) 可以返回文件的块数据,结合FileReader.readAsBinaryString方法,我们在Browser端能读取到本地文件的任意部分数据。
关于FileReader
首先,FileReader并不是每个浏览器都支持的,兼容性测试情况(很不幸,巨硬的IE又拖后腿了……:
操作系统 | Firefox | Chrome | Internet Explorer | Opera | Safari |
Windows | 支持 | 支持 | 不支持 | 支持 | 不支持 |
MAC OS X | 支持 | 支持 | N/A | 支持 | 支持 |
其次,使用readAsBinaryString的方法,需要对FileReader的 onloadend事件进行订阅处理,即读取块数据操作完成时,这个事件订阅方法将得到已读取的二进制块数据:
currentFileReader.onload = function (evnt) {
console.log('Data content length: ', evnt.target.result.length);
};
B/S通信
拿到了块数据,剩下的问题是怎么发出去,有这么些选项:AJAX,富客户端编程,WebSocket。由于网盘项目基于Node开发,我选用了Socket.IO 做为B/S两端通信的框架。
从B端开始
页面准备和引用:
<div>
<progress id="progressBar" value="0" max="100"></progress>
</div>
<input type="button" id="choose-button" value="选择文件">
<input type="file" id="choose-file" class="hidden"/>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
浏览器兼容性测试先行:
if (!window.File && !window.FileReader) {
alert('Your browser does not support the File API. Please use modern browser');
return;
} else {
var socket = io.connect();
var currentFile = null;
var currentFileReader = null;
}
在用户选择了文件后,对相应事件进行处理:
$('#choose-file').on('change', function () {
currentFile = document.getElementById('choose-file').files[0];
if (currentFile) {
currentFileReader = new FileReader();
currentFileReader.onload = function (evnt) {
socket.emit('upload', {
'Name': currentFile.name,
'Segment': evnt.target.result
});
};
socket.emit('start', {
'Name': currentFile.name,
'Size': currentFile.size
});
}
});
从上边的代码可以看出,socket.emit('start') 是整个交互流程的开始,它告诉Server端文件信息;FileReader.onload 则按块向Server端 emit 数据。还缺一段触发 FileReader的代码:
socket.on('moreData', function (data) {
updateProgressBar(data.percent);
var position = data.position * 524288;
var newFile = null;
if (currentFile.slice)
newFile = currentFile.slice(position, position + Math.min(524288, currentFile.size - position));
else if (currentFile.webkitSlice)
newFile = currentFile.webkitSlice(position, position + Math.min(524288, currentFile.size - position));
else if (currentFile.mozSlice)
newFile = currentFile.mozSlice(position, position + Math.min(524288, currentFile.size - position));
if (newFile)
currentFileReader.readAsBinaryString(newFile); // trigger upload event
});
Browser端这个moreData消息,是由Server端触发的,在收到start消息后,Server端将向Browser端发送这个moreData消息。这里需要注意的是,各家浏览器对于Blob.slice接口实现不一 (Firefox 12之前的版本上为blob.mozSlice(), Safari上为blob.webkitSlice()
上传完成的收尾工作:
socket.on('done', function (data) {
delete currentFileReader;
delete currentFile;
updateProgressBar(100);
});
Server端实现
首先,需要一个全局数据结构,来保存每一个上传文件的描述符(传完后从作用域删除):
var Files = {};
然后是Socket.IO的初始化,准备文件描述符:
var io = require('socket.io').listen(server);
io.sockets.on('connection', function (socket) {
//prepare for uploading
socket.on('start', function (data) {
var name = data.Name;
var size = data.Size;
var filePath = '/tmp';
var position = 0;
Files[name] = { // define storage structure
fileSize: size,
data: '',
downloaded: 0,
handler: null,
filePath: filePath,
};
Files[name].getPercent = function () {
return parseInt((this.downloaded / this.fileSize) * 100);
};
Files[name].getPosition = function () {
return this.downloaded / 524288;
};
fs.open(Files[name].filePath, 'a', 0755, function (err, fd) {
if (err)
console.log('[start] file open error: ' + err.toString());
else {
Files[name].handler = fd; // the file descriptor
socket.emit('moreData', { 'position': position, 'percent': 0 });
}
});
});
});
Server端收到upload消息时,并不立即写入,而是进行缓冲,以10M分批进行写入:
socket.on('upload', function (data) {
var name = data.Name;
var segment = data.Segment; Files[name].downloaded += segment.length;
Files[name].data += segment;
if (Files[name].downloaded === Files[name].fileSize) {
fs.write(Files[name].handler, Files[name].data, null, 'Binary',
function (err, written) {
//uploading completed
delete Files[name];
socket.emit('done', { file: file });
});
} else if (Files[name].data.length > 10485760) { //buffer >= 10MB
fs.write(Files[name].handler, Files[name].data, null, 'Binary',
function (err, Writen) {
Files[name].data = ''; //reset the buffer
socket.emit('moreData', {
'position': Files[name].getPosition(),
'percent': Files[name].getPercent()
});
});
}
else {
socket.emit('moreData', {
'position': Files[name].getPosition(),
'percent': Files[name].getPercent()
});
}
});
小结
基于File API 上传方案最大的问题是兼容性,IE,你懂的… 不过,时代总是在进步,我们不能被腐朽落后绑架而裹足不前,也没准开发者和用户的力量真能让这些腐朽落后的玩意儿淡出我们的视线
更多文章请移步我的blog新地址: http://www.moye.me/
[Node.js] 使用File API 异步上传文件的更多相关文章
- Node.js——异步上传文件
前台代码 submit() { var file = this.$refs.fileUpload.files[0]; var formData = new FormData(); formData.a ...
- 利用ajaxfileupload.js异步上传文件
1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...
- JS异步上传文件
直接调用Upload(option)方法,即可上传文件,不需要额外的插件辅助,采用原生js编写. /* *异步上传文件 *option参数 **url:上传路径 **data:上传的其他数据{id:& ...
- 关于js异步上传文件
好久没登录博客园了,今天来一发分享. 最近项目里有个需求,上传文件(好吧,这种需求很常见,这也不是第一次遇到了).当时第一想法就是直接用form表单提交(原谅我以前就是这么干的),不过表单里不仅有文件 ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- Servlet异步上传文件
这里需要用到插件ajaxfileupload.js,jar包:commons-fileupload-1.3.2.jar,commons-io-2.5.jar 注意红色部分的字!!!! 1.创建一个we ...
- struts2 jquery ajaxFileUpload 异步上传文件
网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
随机推荐
- iOS7隐藏状态栏 statusBar
转:http://blog.csdn.net/dqjyong/article/details/17896145 评:通过这点变化,可以看出苹果倾向于使用delegate取代全局变量. IOS7中,不仅 ...
- AngularJS 中的 Promise 和 设计模式(转)
原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...
- [C/C++] zltabout(带缩进的格式化输出)v1.0。能以相同的代码绑定到 C FILE 或 C++流
作者:zyl910 一.缘由 在写一些生成文本的程序时,经常需要使用带缩进的格式化输出的功能.以前为此写过不少类似的函数,可惜它们的可重用性很差. 这是因为——1) C语言的FILE*不支持重定向到自 ...
- C#版Windows服务安装卸载小工具-附源码
前言 在我们的工作中,经常遇到Windows服务的安装和卸载,在之前公司也普写过一个WinForm程序选择安装路径,这次再来个小巧灵活的控制台程序,不用再选择,只需放到需要安装服务的目录中运行就可以实 ...
- Oracle中Kill session的研究(转 出自eagle)
itpub link: http://www.itpub.net/235873.html 我们知道,在Oracle数据库中,可以通过kill session的方式来终止一个进程,其基本语法结构为: a ...
- [转]说说C#的async和await
C# 5.0中引入了async 和 await.这两个关键字可以让你更方便的写出异步代码. 看个例子: public class MyClass { public MyClass() { Displa ...
- 怎样用UltraISO制作U盘系统安装盘
http://jingyan.baidu.com/article/d169e186800f02436711d87b.html 如今用u盘装系统成为主流,如何不被社会淘汰.跟我往下边看吧~~ 工具/原料 ...
- 一篇文章,读懂 Netty 的高性能架构之道
原文 Netty是一个高性能.异步事件驱动的NIO框架,它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作都是异步非阻塞的,通过Future-Listener机 ...
- Show Linux Package Sort By Size
ArchLinux: ~ $ pacsysclean Debian: ~ $ sudo apt-get install debian-goodies ~ $ dpigs -H
- CSS3 页面跳转的动画效果
从左侧弹出: var windowWidth = window.innerWidth; $(atlas_list).css({ "transition":"none&qu ...