EXCEL VBAやPHP、Query、Ajaxに関するWINDOWS・WEBプログラミングの解説ブログです。

Ajax、PHP、mySQLで画像アップロードWEBアプリ 作り方

Ajax、PHP、mySQLで画像アップロードWEBアプリ 作り方

Ajax,PHP,mySQLで画像のアップロードシステムを作成しました。Ajaxですのでページ遷移なしで画像のアップロードを行えます。単純にアップロードするだけではなく、ファイル名をデータベースにINSERT、UPDATE、DELETEします。Ajaxでページ遷移無しでのアプリですので、レガートでモダンです。

「イメージ画像追加」ボタンを押すと、下の「画像の追加」フォームが表示されます。「ファイルを選択」クリックし、画像を選択し、「登録ボタン」をクリックします。当然ですが、画像がサーバにアップロードされます。同時にファイル名を取得し、mySQLデータベースにファイル名を挿入INSERTします。画像を選択せずに「登録」ボタンを押すと、アラートが表示され、処理ができません。

登録されると、下のように、表にアップロードされた画像を表示し、データベースに登録されたファイル名を問合せSELECTします。

画像を変更する場合は、表内の対象レコードの「変更」ボタンをクリックします。下の画像の変更フォームが表示されます。「ファイルを選択」で画像を選択し、「変更」ボタンをクリックします。当然ですが、画像がサーバにアップロードされます。同時にファイル名を取得し、mySQLデータベースにファイル名を更新UPFATEします。削除の場合は、データベース内テーブルから対象レコードを削除DELETEします。

データベーステーブル

下がテーブル構造です。フィールドは、連番のidとnameのみです。

下がテーブルのSELECT結果です。

フロント側PHPファイル

jqueryとbootstrap読み込んでいます。要素image_data に、SELECT問合せ結果全件表示させています。

登録は、イメージ画像追加ボタンid=”add”をクリックすることにより、モーダルウインドウid=”imageModal”を表示させます。

修正は、要素image_data内、対象レコードの変更ボタンclass=”update”をクリックすることにより、モーダルウインドウid=”imageModal”を表示させます。

jQueryファイル

ページを開いたときは、Display()が呼び出され、変数actionにDisplayを設定し、表tableを表示します。

追加ボタンクリック時は、変数actionにinsertを設定します。変更ボタンクリック時は、変数actionにupdateを設定します。

モーダルウインドウ上で、画像選択し、「登録」あるいは「変更」ボタンをクリックしたときは、変数actionをバックグランド側PHPにPOSTします。

ファイル種類が画像以外のときは、アラートを表示し、アップロードできません。

バックグランド側PHPファイル

以下がバックグランド側PHPファイルです。