【JQuery】「jQuery-File-Upload」でアップロードするイメージのプレビューを表示してみる

Javascript, 開発

おはようございます。

久しぶりの JQuery 記事です。

今回は、ファイルをアップロードする時に便利なプラグイン「jQuery-File-Upload」で、
アップロードする前にプレビューを表示する方法を試してみました。

サクッとですが。。

スポンサーリンク

プログラム

html

index.html

javascript

js/script.js

add メソッドで、ファイルを読み込み画面の「img」タグにデータを流し込む感じですね。

後はサーバーに送ってファイルとしてサーバー上に書き出すか、DBにそのまま入れるかすれば保存できます。

画面イメージ

初期表示
初期表示
ファイル選択後
ファイル選択後

無事にプレビュー表示することができました。

まとめ

ひとまずサクッとプレビューのみ試してみました。(画像以外は考慮してません)

次回は未定ですが、そのうち色々弄ってみたいと思います。

何かのお役に立てれば。

ではでは。

 

スポンサーリンク


関連するコンテンツ