HTML5のFile APIを使うと、複数ファイルのアップロードが簡単に出来るそうなので、試してみました。 対象のブラウザがモダンブラウザに限定されるようなのですが、妙に簡単に出来たのが印象的。 ちなみに、CakePHP2(2.3.6)でも動きました。 Bootstrap を使って UI を整えたファイルアップロードフォームの例 上の二つのサンプルでは見栄えが悪いので、Bootstrap を利用してアップロードフォームを作成します。 さらにアップロードの進行状況をプログレスバーで表示し、直感的に完了した割合がわかるようにします。 このサンプルでは、複数のファイルを処理するために jQuery アップロード コントロールが設定されています。 maxSimultaneousFilesUploads および maxUploadedFiles プロパティを使用すると、複数ファイルをアップロードするときにアップロードされるファイルの最大数を制限できます。 カスタム選択の複数ファイル名をリスト表示 ファイルを選択すると、コントロールの下にファイル名とサイズをリスト表示。 ※注意:v4.1.2ではcssの設定にバグがあり、ファイル選択画面が起動しな … bootstrapを使ってファイルをアップロードするフォームをつくるとき、デフォルトのボタンは小さくて、特にスマホでは表示する際に使いにくいと感じます こちらの投稿でBootstrap File Inputを使った方法が紹介されています。 見た目だけでなく、機能も豊富で参考になります。

Bootstrapのfileアップロードフォームがダサいから装飾してみた 2016/01/16 2017/01/31 おすすめ記事 個人開発のWebアプリがツイッター世界トレンド1位になったけどいろいろ辛かった話 #チョコボックス … Bootstrap、便利なんですが だけなぜかイケてないんですよね。 そこで、比較的簡単によりBootstrapっぽくカッコ良くなる実装をしてみました。 HTML JS 方針 本体そのものをstyle="display:none;"で隠す。 その代替として、アイコン付きrea…