はじめに
こんにちは、仙石です。
前回、さくらVPSサーバ(CentOS 6.2)へのqmail+vpopmailのインストール(参考)を紹介しました。
今回は、JavaScriptを使い「参照ボタン」が表示されず、且つアップロード画像のサムネイル表示をするフォームを紹介します。
前回、さくらVPSサーバ(CentOS 6.2)へのqmail+vpopmailのインストール(参考)を紹介しました。
今回は、JavaScriptを使い「参照ボタン」が表示されず、且つアップロード画像のサムネイル表示をするフォームを紹介します。
導入例
画像ファイルのアップロードを行う場合、以下の様に記述することでフォームを作成します。
<form method="post" action="./hoge" enctype="multipart/form-data"> <input type="file" name="image"> </form>
今回は、JavaScriptを利用することで、以下のフォームを作成します。
例えば、アップロードボタンをクリックし、画像を選択することで、以下の様に表示が変化します。
サムネイル表示をすることで、誤った画像ファイルのアップロードを防ぐことができます。
また、見栄えも宜しいかと思います。
例えば、アップロードボタンをクリックし、画像を選択することで、以下の様に表示が変化します。
サムネイル表示をすることで、誤った画像ファイルのアップロードを防ぐことができます。
また、見栄えも宜しいかと思います。
処理について
具体的なスクリプト等は次回以降掲載しますが、おおまかな処理の流れを以下に記述します。
こちらの実装を行う上で、大きく分けて３つのスクリプトを利用します。
html、JavaScriptとPHPです。
まず、html上の要素が持つデータをJavaScriptが抜き出し、サーバへ送ります。
次に、サーバ上のPHPが送られてきたデータについてアクションを起こします。
そして、サーバ上のPHPよりブラウザへ送られてきたデータをJavaScriptが受け取り、htmlの要素にセットし直します。
結果、サーバ上、画像ファイルがアップロードされ、ブラウザ上、サムネイル画像が表示されます。
では、次回より各スクリプトを紹介します。
