Stream上传插件(文件夹上传支持)

原创
2014/01/03 13:59
阅读数 5.9K

HTML5文件夹上传,目前支持的浏览器有Chrome21+, Opera15+。是实现文件夹上传的功能时,主要参考两段JS文件,地址:http://protonet.github.io/plupload/src/javascript/plupload.html5.js(是关于拖拽上传文件的巧妙处理方式),

http://html5-demos.appspot.com/static/html5storage/demos/upload_directory/index.html(通过文件选择按钮上传文件夹,需要翻墙)。

主要是拖拽处理的方式复杂一些,贴出http://protonet.github.io/plupload/src/javascript/plupload.html5.js的处理方式:

function walkFileSystem(directory, callback, error) {
	if (!callback.pending) {
		callback.pending = 0;
	}
	if (!callback.files) {
		callback.files = [];
	}
				
	callback.pending++;
				
	var reader = directory.createReader(),
	relativePath = directory.fullPath.replace(/^\//, "").replace(/(.+?)\/?$/, "$1/");
	reader.readEntries(function(entries) {
		callback.pending--;
		plupload.each(entries, function(entry) {
		if (entry.isFile) {
			callback.pending++;
			entry.file(function(File) {
				File.relativePath = relativePath + File.name;
				callback.files.push(File);
				if (--callback.pending === 0) {
					callback(callback.files);
				}
			}, error);
		} else {
			walkFileSystem(entry, callback, error);
		}
	      });
					
             if (callback.pending === 0) {
		callback(callback.files);
	    }
	}, error);
}

在callback的处理非常巧妙!目前Stram上传插件已经实现该功能,测试地址:http://p.twinkling.cn

下载地址:http://git.oschina.net/jiangdx/stream/attach_files

另外,推广一下我的网盘搜索引擎:http://www.impress.pw (搜索种子文件非常好用~)


展开阅读全文
打赏
1
12 收藏
分享
加载中
更多评论
打赏
0 评论
12 收藏
1
分享
返回顶部
顶部