基本上,各种产品都会用到一个很普通,但又很难实现的很漂亮的功能——文件上传。比较早期的一些Web框架还特地为File Upload做了专用的组件来方便开发者上传以及在后端处理上传的文件。这次我就介绍一个帮助大家超轻松实现文件上传功能的服务,Filepicker。
Filepicker.io
Filepicker做的事情很简单:帮助你用最少的代码把文件传到你想要的地方。我们直接看一个最简单的例子,使用Filepicker提供的Drag-Drop Pane widget来上传图片。
filepicker.makeDropPane($('#exampleDropPane'), {
multiple: true,
onSuccess: function(Blobs) {
$("#exampleDropPane").text("Done, see result below");
console.log(JSON.stringify(Blobs));
},
onError: function(type, message) {
$("#localDropResult").text('('+type+') '+ message);
},
onProgress: function(percentage) {
$("#exampleDropPane").text("Uploading ("+percentage+"%)");
}
});
只要在页面上加一个id是exampleDropPane的div,它就会变成一个可以往进拖拽文件并上传的控件。上传成功以后,onSuccess里就可以得到上传以后的文件信息,比如如下。
[{"url":"https://www.filepicker.io/api/file/n4Ba7BdNSJyaLZfu2Qm5","filename":"logo-primary.png","mimetype":"image/png","size":8452,"isWriteable":false}]
返回信息里包括文件URL,mime(filepicker帮你分析出来的,我测试了下apk也可以分析的出来,挺不错的)和一起其他信息。
也许你会很奇怪,这文件没有传到我的服务器上呀�?是的,Filepicker不光帮你写前端代码,也帮你搞定了文件存储(默认情况)。这意味着一个前端工程师,使用BaaS类服务,加上Filepicker就可以超容易的做出一个允许用户上传文件的WebApp——在onSuccess里在BaaS里创建一个文件对象,把url指向Blobs.url就可以啦。
如果你很在意用其他数据存储服务,比如S3,Azure,Dropbox,Rackspace。可以简单的在makeDropPane里添加选项location:'dropbox'就可以啦。在Developer Portal里你可以配置如上几种服务的各种Key。
还有一种情况,你的App需要把数据存在用户自己的某类存储账号中,比如用户自己的Box,用widget就可以很容易enable这个功能。
API
Filepicker支持各种终端,并提供SDK(当然有Javascript的)。
btw. Meteor的发展速度真是猛啊!
CDN
如果你的网站是个IO集中型的,换言之很在乎CDN的,可以使用Amazon的CloudFront和Filepicker.io一起使用。
Price
Filepicker帮你保存文件,提供一行代码添加uploader,可以存在各种地方,你觉得得多少钱?只需要29或者99!刀...价目表很清楚,我感觉对于小公司也是超值的。另外就是,我很好奇最牛逼方案里20GB大文件是咋搞...
ok,抱歉又水了一篇,太困了,晚安~