(30 hackdays day 16) Filepicker - 上传文件如此简单

基本上，各种产品都会用到一个很普通，但又很难实现的很漂亮的功能——文件上传。比较早期的一些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，抱歉又水了一篇，太困了，晚安～

想了解这个30 hackdays可以查看这篇文章。也欢迎访问我的墙外站