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/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
input タグで画像を選んだら即時にプレビューを表示する jQuery iPreview プラグインを公開しました。
input タグで画像を選んだら即時にプレビューを表示する jQuery iPreview プラグインを公開しました。 2013年12月17日 16:44JavaScript 最近のブラウザには File API というものが実装されていて JavaScript からファイルの情報を読み取ることができるので HTML の image[type=file] で画像を選んだときなんかに その場でプレビューを表示することもできますね。 これを使いたくてつついてたんだけど、 この処理を毎回書くのはめんどくさいので jQuery のプラグインにしました。 msng/jQuery.iPreview – GitHub JavaScript 書かない人も簡単に使えるようにしたつもりだし、 割と自由にカスタマイズできるようにもなってると思います。 jQuery iPreview でできること このボタンを押
File APIを使ってみよう
File APIを使ってみよう このエントリーはjQuery Advent Calendar 2013の 5日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はFile APIを利用してローカルファイルの内容をページに表示する方法を解説します。 File APIが利用できるブラウザではwindowオブジェクトにFileプロパティが設定されているので以下のようなスクリプトでFile APIが利用できるブラウザと利用できないブラウザで処理を切り分けることができます。 if(window.File){ alert("File APIが利用できます"); }else{ alert("File APIが利用できません"); } サンプル1 ちなみにIEはIE10からFile APIが利用できます。 Fil
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
