jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68996a682d66a0a12cce22ce700c4f49f5b6023/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png)
selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」:phpspot開発日誌
selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」 2015年02月03日- jQuery easySelect selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」。 selectタグにmultiple属性を追加すると複数選択が可能ですが、これを複数選択形式をUIを変えて入力補完のような形にするプラグインです。 selectのmultipleはCtrlキーを押しながらクリックするなどというUIとなるため、あまり採用はされませんが、ケースによってはこういう入力のUIも使いやすい場合がありそうです 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flex
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
