画像のアップロードをかっこよく実装する - (ﾟ∀ﾟ)o彡 sasata299's blog
2012年02月16日11:36 Webアプリ 画像のアップロードをかっこよく実装する 久しぶりのブログですこんにちわ！最近は主になめこを栽培しております。 なめこ図鑑46%まできたお (*´ω｀*)— ささたつ(Tatsuya Sasaki) (@sasata299) February 13, 2012 ということで、今回は画像のアップロードをかっこよくやる方法について紹介します。 画像のアップロードというか、アップロードしたいファイルの選択ですかね。Twitterだとこんな感じのカメラ画像があって、それをクリックするとファイル選択画面になるんです。 アップロードしたいファイルの選択って、ふつーに実装するとこんな感じのデザインです。かっこよくない！！ まぁこんな感じですよね。 そうじゃなくて、Twitterみたいな感じで画像をクリックするとシャキーン！とファイル選択画面が出てくる、そうい
jQuery.autouploader Pluginを作成しました。 : tech.kayac.com - KAYAC engineers' blog
AutoHotKeyの設定ファイルが意味不明で困ってます。agoです。 このたび弊社ではにおい部 - においフェチに捧げるコミュニティとして、におい部をOPENしました。 今回はこのサイトで使用している、ファイル選択時の自動プレビューjavascriptをjQuery.autouploaderとしてjQuery Plugin化したので公開したいと思います。 使い方はjQueryと一緒にpluginを読み込むだけ。 <script type="text/javascript"jquery.autouploader.js"></script> これで<form enctype="multipart/form-data">の中にある、<input type="file">に対して自動的にプレビュー機能が追加されます。 サーバサイドはアップロードされたファイルを保存し、そのURIを返すAPIを作成
PHPで画像アップロード時のプレビュー
CMSでは画像をアップロードする場面が少なくないと思いますが、通常のフォームでは投稿した後にならないと実際のアップロード後のイメージを見ることができません。 そこで、今回要望があって作ることになったんですがファイルを選択した時点で画像のプレビューを表示し、気に入ったものが選択できた時点で他のテキストなどのテータと共に投稿するというインターフェイスを作ってみました。 実際の作り方は以下のとおり。 プレビューの仕組み まず、この仕組みがどうなっているのかを説明しますと、ファイルを選択したイベントでいったんアップロードを行ってしまい画像ファイルを作業ディレクトリに保存します。 そして、その後でJavaScriptでプレビュー領域にimgタグを出力して表示を行います。 ポイントは、アップロードの際に隠しiframeをtargetに指定してすぐにその値を元に戻すという部分の処理です。 それには、以下
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
