基本上，各種產(chǎn)品都會(huì)用到一個(gè)很普通，但又很難實(shí)現(xiàn)的很漂亮的功能——文件上傳或辖。比較早期的一些Web框架還特地為File Upload做了專用的組件來方便開發(fā)者上傳以及在后端處理上傳的文件。這次我就介紹一個(gè)幫助大家超輕松實(shí)現(xiàn)文件上傳功能的服務(wù)，Filepicker训堆。
Filepicker.io
Filepicker做的事情很簡單：幫助你用最少的代碼把文件傳到你想要的地方。我們直接看一個(gè)最簡單的例子白嘁，使用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“⑻樱可以簡單的在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ā)展速度真是猛巴辽啊州既！
CDN
如果你的網(wǎng)站是個(gè)IO集中型的，換言之很在乎CDN的萝映，可以使用Amazon的CloudFront和Filepicker.io一起使用吴叶。
Price
Filepicker幫你保存文件，提供一行代碼添加uploader序臂，可以存在各種地方蚌卤，你覺得得多少錢？只需要29或者99！刀...價(jià)目表很清楚造寝，我感覺對(duì)于小公司也是超值的。另外就是吭练，我很好奇最牛逼方案里20GB大文件是咋搞...
ok诫龙，抱歉又水了一篇，太困了鲫咽，晚安～
