-
-
Labels: JavaScript
手軽に美しく実装！ファイルアップロード用JavaScriptライブラリ4選
ランサーズでは、現在、Webエンジニアを募集しています。
詳しくは、募集要項をご覧下さい。
こんにちは、keiです。
今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。
ランサーズ上で、大容量ファイルのアップロード機能を実装することになった際に、以下の軸で調査した結果となります。
- 手軽に実装できる
- 見た目が今風
- (大容量なので)アップロード中にプログレスバーが表示される
Uploadify
http://www.uploadify.com/
複数ファイルアップロードが可能なjQueryプラグイン。
HTML5バージョンとFlashバージョンがあります。
長所
- 豊富なドキュメントとデモ
- 高いカスタマイズ性
短所
- HTML5はライセンスが必要
Plupload
http://www.plupload.com/
HTML5、Flash、Silverlightに加え、GearsとBrowserPlusにも対応しています。
画像のリサイズやチャンクアップロードも可能です。
長所
- オプションが豊富
- 高い柔軟性
- Amazon S3に直接アップロードできるプラグインがある
短所
- ライブラリを理解するのが難しい
- Amazon S3プラグインでのアップロードはとても遅い(およそ2倍)
Fine Uploader
http://fineuploader.com/
必要最低限の設定で、十分なアップロード機能を実装できます。
長所
- 単純なアップロード機能を実装したい場合に向いている
短所
- アップロード中のアニメーションが、IE6～8では動作しない
FancyUpload
http://digitarald.de/project/fancyupload/
JavaScriptフレームワークMooToolsをベースにしたライブラリ。
長所
- とてもシンプル
短所
- とてもシンプル
ファイルアップロード機能を実装する際は、これらのライブラリを利用して、見た目にもこだわってみてはいかがでしょうか？
※注：ライセンスが必要なライブラリもありますので、使用の際はご確認をお願いします。
ランサーズのFacebookページでも色々な情報を発信しております。
よろしければ、いいね！をお願いします。
ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています！
ご興味がある方は、以下URLよりご応募ください。
【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア
【新卒採用・その他】
21・22新卒
その他採用情報
関連記事
-
-
Webpack で git 管理してもよいような環境ごとに値の異なる定数を設定する方法
森です。仕事でのちょっとしたコミットをブログ記事化するシリーズです。今日は Webpack の話題です。 課題 環境ごとに値の異なる定数として、git で管理できるものと git で管理すべきではないものがあります。後者は dotenv と Webpack の …
-
-
チャットワークをもっと使いやすくする拡張機能を作った
こんにちはエンジニアの上野です。 2016年のAdventCalendar も残すところあと僅か！ 12/5の投稿（githubのissue, pull request 検索をハックする！）に引き続き、今日はチャットワークの拡張プラグインのご紹介です。エンジニ …
-
-
ランサーズ開発合宿2019 GASとSmartHR APIで業務効率化
みなさんこんにちは。 ランサーズでインターンをしている神谷（GunjiKamiya）です。 自身初投稿となる今回の記事では、自分が参加したLancers開発合宿2019でのことについて書いていこうと思います。 Lancersの開発部では、1年に一度大都会東京を …