[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插件. ...
随机推荐
- php-fpm.conf 重要参数 max_children 和 request_terminate_timeout(转)
php-fpm.conf有两个至关重要的参数:一个是”max_children”,另一个是”request_terminate_timeout”我的两个设置的值一个是”40″,一个是”900″,但是这 ...
- cmdCreateViewTag
start ).Y < grid.Curve.get_EndPoint().Y) { grid = gridTmp; ...
- iOS开发实用技巧—项目新特性页面的处理
iOS开发实用技巧篇—项目新特性页面的处理 说明:本文主要说明在项目开发中会涉及到的最最简单的新特性界面(实用UIScrollView展示多张图片的轮播)的处理. 代码示例: 新建一个专门的处理新特性 ...
- mysql导入数据出错
今天准备移动网站到另外一个服务器,用的是mysql数据库,导出的时候正常,导入的时候出现了一个错误,纠结了半天 最后打开sql文件发现导出的sql确实有问题 具体什么原因不清楚,只好把以前备份的sql ...
- 画之国 Le tableau (2011)
在佛斯特的肚子里,靠近幽门的地方,两只阿米巴原虫快乐地生活着.他们的日子过得很舒服,从来没饿过肚子,而且根本用不着干活:因为他们就是所谓的寄生虫.这两个好朋友相处得很愉快,但时不时也会争论不休,因为他 ...
- Android Studio生成javadoc出错的解决办法
一般使用Android Studio生成javadoc会有两个问题: 空指针异常 文档乱码 解决办法如下: 第1个问题:Tools --> Generate JavaDoc -->打开对话 ...
- [C#] zdbviewcs: 跨平台数据库查看器。支持SqlServer、Oracle、MySql等数据库
作者:zyl910 一.说明 本工具有适合以下情况使用—— * 快速查看数据库中数据及表结构信息.* 测试ADO.Net下连接字符串的写法.* 帮忙分析ADO.Net数据库操作. 二.用法 运行本程序 ...
- Linux内核源码详解——命令篇之iostat[zz]
本文主要分析了Linux的iostat命令的源码,iostat的主要功能见博客:性能测试进阶指南——基础篇之磁盘IO iostat源码共563行,应该算是Linux系统命令代码比较少的了.源代码中主要 ...
- Codeforces Round #381 (Div. 1) A. Alyona and mex 构造
A. Alyona and mex 题目连接: http://codeforces.com/contest/739/problem/A Description Alyona's mother want ...
- js中“==”与"==="的区别
首先,== equality 等同,=== identity 恒等. ==, 两边值类型不同的时候,要先进行类型转换,再比较. ===,不做类型转换,类型不同的一定不等. 一言以蔽之:==先转换类型再 ...