基本上，各種產(chǎn)品都會(huì)用到一個(gè)很普通，但又很難實(shí)現(xiàn)的很漂亮的功能——文件上傳。比較早期的一些Web框架還特地為File Upload做了專用的組件來方便開發(fā)者上傳以及在后端處理上傳的文件。這次我就介紹一個(gè)幫助大家超輕松實(shí)現(xiàn)文件上傳功能的服務(wù)，Filepicker。
Filepicker.io
Filepicker做的事情很簡(jiǎn)單：幫助你用最少的代碼把文件傳到你想要的地方。我們直接看一個(gè)最簡(jiǎn)單的例子，使用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+"%)");
}
});
只要在頁面上加一個(gè)id是exampleDropPane的div，它就會(huì)變成一個(gè)可以往進(jìn)拖拽文件并上傳的控件。上傳成功以后，onSuccess里就可以得到上傳以后的文件信息，比如如下。
[{"url":"https://www.filepicker.io/api/file/n4Ba7BdNSJyaLZfu2Qm5","filename":"logo-primary.png","mimetype":"image/png","size":8452,"isWriteable":false}]
返回信息里包括文件URL，mime（filepicker幫你分析出來的，我測(cè)試了下apk也可以分析的出來，挺不錯(cuò)的）和一起其他信息。
也許你會(huì)很奇怪，這文件沒有傳到我的服務(wù)器上呀?？是的，F(xiàn)ilepicker不光幫你寫前端代碼，也幫你搞定了文件存儲(chǔ)（默認(rèn)情況）。這意味著一個(gè)前端工程師，使用BaaS類服務(wù)，加上Filepicker就可以超容易的做出一個(gè)允許用戶上傳文件的WebApp——在onSuccess里在BaaS里創(chuàng)建一個(gè)文件對(duì)象，把url指向Blobs.url就可以啦。
如果你很在意用其他數(shù)據(jù)存儲(chǔ)服務(wù)，比如S3，Azure，Dropbox，Rackspace?？梢院?jiǎn)單的在makeDropPane里添加選項(xiàng)location:'dropbox'就可以啦。在Developer Portal里你可以配置如上幾種服務(wù)的各種Key。
還有一種情況，你的App需要把數(shù)據(jù)存在用戶自己的某類存儲(chǔ)賬號(hào)中，比如用戶自己的Box，用widget就可以很容易enable這個(gè)功能。
API
Filepicker支持各種終端，并提供SDK（當(dāng)然有Javascript的）。
btw. Meteor的發(fā)展速度真是猛?。?/p>
CDN
如果你的網(wǎng)站是個(gè)IO集中型的，換言之很在乎CDN的，可以使用Amazon的CloudFront和Filepicker.io一起使用。
Price
Filepicker幫你保存文件，提供一行代碼添加uploader，可以存在各種地方，你覺得得多少錢？只需要29或者99！刀...價(jià)目表很清楚，我感覺對(duì)于小公司也是超值的。另外就是，我很好奇最牛逼方案里20GB大文件是咋搞...
ok，抱歉又水了一篇，太困了，晚安～
