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


基本上,各种产品都会用到一个很普通,但又很难实现的很漂亮的功能——文件上传。比较早期的一些Web框架还特地为File Upload做了专用的组件来方便开发者上传以及在后端处理上传的文件。这次我就介绍一个帮助大家超轻松实现文件上传功能的服务,Filepicker

logo

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。

Filepicker.io   Developer Portal   fxp007 gmail.com.png

还有一种情况,你的App需要把数据存在用户自己的某类存储账号中,比如用户自己的Box,用widget就可以很容易enable这个功能。

API

Filepicker支持各种终端,并提供SDK(当然有Javascript的)。

Filepicker SDK

btw. Meteor的发展速度真是猛啊!

CDN

如果你的网站是个IO集中型的,换言之很在乎CDN的,可以使用Amazon的CloudFront和Filepicker.io一起使用。

Price

Filepicker帮你保存文件,提供一行代码添加uploader,可以存在各种地方,你觉得得多少钱?只需要29或者99!刀…价目表很清楚,我感觉对于小公司也是超值的。另外就是,我很好奇最牛逼方案里20GB大文件是咋搞…
Filepicker.io   Easy  Powerful File Uploads.png

ok,抱歉又水了一篇,太困了,晚安~

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

(30 hackdays day 16) Filepicker – 上传文件如此简单”的一个响应

Add yours

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

w

Connecting to %s

在WordPress.com的博客.

向上 ↑

%d 博主赞过: