ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  JavaScript 投稿者:kei

手軽に美しく実装!ファイルアップロード用JavaScriptライブラリ4選

ランサーズでは、現在、Webエンジニアを募集しています。
詳しくは、募集要項をご覧下さい。

こんにちは、keiです。
今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。
ランサーズ上で、大容量ファイルのアップロード機能を実装することになった際に、以下の軸で調査した結果となります。

  • 手軽に実装できる
  • 見た目が今風
  • (大容量なので)アップロード中にプログレスバーが表示される

Uploadify

http://www.uploadify.com/
demos-uploadify
複数ファイルアップロードが可能なjQueryプラグイン。
HTML5バージョンとFlashバージョンがあります。

長所

  • 豊富なドキュメントとデモ
  • 高いカスタマイズ性

短所

  • HTML5はライセンスが必要

Plupload

http://www.plupload.com/
plupload-a-tool-for-uploading-files-using-flash-silverlight-google-gears-html5-or-browserplus
HTML5、Flash、Silverlightに加え、GearsとBrowserPlusにも対応しています。
features
画像のリサイズやチャンクアップロードも可能です。

長所

  • オプションが豊富
  • 高い柔軟性
  • Amazon S3に直接アップロードできるプラグインがある

短所

  • ライブラリを理解するのが難しい
  • Amazon S3プラグインでのアップロードはとても遅い(およそ2倍)

Fine Uploader

http://fineuploader.com/
fine-uploader
必要最低限の設定で、十分なアップロード機能を実装できます。

長所

  • 単純なアップロード機能を実装したい場合に向いている

短所

  • アップロード中のアニメーションが、IE6~8では動作しない

FancyUpload

http://digitarald.de/project/fancyupload/
queued-photo-uploader-c2bb-fancyupload-swiff-meets-ajax-showcase-c2bb-digitarald-harald-kirschner
JavaScriptフレームワークMooToolsをベースにしたライブラリ。

長所

  • とてもシンプル

短所

  • とてもシンプル
今回ご紹介した4つのライブラリは、手軽に実装できるだけでなく、ドラッグ&ドロップやプログレスバーをサポートするなど、ユーザフレンドリーな設計になっています。
ファイルアップロード機能を実装する際は、これらのライブラリを利用して、見た目にもこだわってみてはいかがでしょうか?
※注:ライセンスが必要なライブラリもありますので、使用の際はご確認をお願いします。

ランサーズのFacebookページでも色々な情報を発信しております。
よろしければ、いいね!をお願いします。

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア

【新卒採用・その他】
21・22新卒
その他採用情報

関連記事

thumbnail
Webpack で git 管理してもよいような環境ごとに値の異なる定数を設定する方法

森です。仕事でのちょっとしたコミットをブログ記事化するシリーズです。今日は Webpack の話題です。 課題 環境ごとに値の異なる定数として、git で管理できるものと git で管理すべきではないものがあります。後者は dotenv と Webpack の …

チャットワークをもっと使いやすくする拡張機能を作った

こんにちはエンジニアの上野です。 2016年のAdventCalendar も残すところあと僅か! 12/5の投稿(githubのissue, pull request 検索をハックする!)に引き続き、今日はチャットワークの拡張プラグインのご紹介です。エンジニ …

ランサーズ開発合宿2019 GASとSmartHR APIで業務効率化

みなさんこんにちは。 ランサーズでインターンをしている神谷(GunjiKamiya)です。 自身初投稿となる今回の記事では、自分が参加したLancers開発合宿2019でのことについて書いていこうと思います。 Lancersの開発部では、1年に一度大都会東京を …