Ajax、PHP、mySQLで画像アップロードWEBアプリ　作り方│ちからえもんWEB・WINDOWSプログラミング

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”を表示させます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ajax、PHP、mySQLで画像アップロード管理WEBアプリ　作り方</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"><!--　←　触らないBootstrap v4.3.1　-->
    <script src="js/jquery-3.4.1.min.js"></script><!--　←　触らない　-->
    <!-- <script src="js/jquery-ui.min.js"></script> --><!--　←　触らない　-->
    <script src="js/bootstrap.min.js"></script><!--　←　触らない　-->
    <script src="myjquery15.js"></script><!--　←　ここにJQuery加筆していく　-->
    <style>
        h1{font-size:1.3rem;margin-top:1rem;}
        h2{font-size:1.15rem;margin-top:-1.0rem;}
    </style>
</head>
<body>
<div class="container">	
	<div style="">
		<div style="width:120px;height:auto;"><a href="https://chikaraemon.com/"><img src="logo.jpg"></a></div>
	</div>		
	
   	<div class="">    	
       <h1 class="text-primary">Ajax、PHP、mySQLで画像アップロード・管理WEBアプリ　作り方</h1>
    </div>
   	<div class="">
        <div class="text-left" style="margin-bottom:1rem;">
            <button type="button" name="add" id="add" class="btn btn-primary">イメージ画像追加</button>
        </div>
   		<div id="image_data">
   		</div>
    </div>  		
</div><!--ここまでcontainer-->
</body>
</html>

<div id="imageModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title"></h3>
            </div>
            <div class="modal-body">                
                <form id="image_form" method="post" enctype="multipart/form-data">
                    <label>画像を選択してください</label>
                    <input type="file" name="image" id="image" />
                    <input type="hidden" name="action" id="action" value="insert" />
                    <input type="hidden" name="image_id" id="image_id" />
                    <input type="submit" name="insert" id="insert" value="登録" class="btn btn-info" />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default btn-danger" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

<!DOCTYPE html>

<head>

<title>Ajax、PHP、mySQLで画像アップロード管理WEBアプリ　作り方</title>

<style>

h1{font-size:1.3rem;margin-top:1rem;}

h2{font-size:1.15rem;margin-top:-1.0rem;}

</style>

</head>

<body>

</div>

<h1 class="text-primary">Ajax、PHP、mySQLで画像アップロード・管理WEBアプリ　作り方</h1>

</div>

<button type="button" name="add" id="add" class="btn btn-primary">イメージ画像追加</button>

</div>

</div>

</div>

</body>

</html>

</div>

<label>画像を選択してください</label>

</form>

</div>

</div>

jQueryファイル

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

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

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

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

$(document).ready(function(){
    var url = "action15.php"

	//問い合わせ　一覧表示
	Display();

	//一覧表示
	function Display()
	{
		var action = "Display";
		$.ajax({
			url: url,
			method:"POST",
			data:{action:action},
			success:function(data)
			{
				$('#image_data').html(data);
			}
		})
	}

	//追加ボタンクリック
	$(document).on('click','#add',function(){
		$('#image_form')[0].reset();
		$('.modal-title').text("画像の追加");
		$('.modal-title').removeClass("text-warning");
		$('.modal-title').removeClass("text-danger");
		$('.modal-title').addClass("text-success");
		$('#image_id').val('');
		$('#action').val('insert');
		$('#insert').val('登録');
		$('#imageModal').modal('show');	
	});

	//開いたフォームの登録　あるいは　変更ボタンクリック
	$('#image_form').submit(function(event){
		event.preventDefault();
		var image_name = $('#image').val();
		var formData = new FormData(this);
		//for (item of formData) {
		//	console.log(item);
		//}
		if(image_name == ''){
			alert("画像ファイルを選択してください");return false;
		}else{
			//UPLOADされた画像の拡張子を取得
			var extension = $('#image').val().split('.').pop().toLowerCase();
			if(jQuery.inArray(extension,['gif','png','jpg','jpeg']) == -1){
				alert("GIF、PNG、JPG、JPEGファイルのみです");$('#image').val('');
				return false;
			}else{
				$.ajax({
					url: url,
					method:"POST",
					data: formData,
					contentType:false,
					processData:false,
					success:function(data){
						Display();
						alert(data);
						$('#image_form')[0].reset();
						$('#imageModal').modal('hide');	
					}
				});
			}
		}
	});


	//変更ボタンクリック
	$(document).on('click','.update',function(){
		$('#image_id').val($(this).attr("id"));//idを取得
		//alert($(this).attr("id"));
		$('.modal-title').text("画像の変更");
		$('.modal-title').removeClass("text-success");
		$('.modal-title').removeClass("text-danger");
		$('.modal-title').addClass("text-warning");
		$('#action').val("update");
		$('#insert').val("変更");
		$('#imageModal').modal('show');	
	});

	//削除ボタンクリック
	$(document).on('click','.delete',function(){
		var image_id = $(this).attr("id");//idを取得
		var action = "delete";
		if(confirm("画像を削除しますが宜しいですか？")){	
			//alert(image_id);		
			$.ajax({
				url: url,
				method:"POST",
				data:{image_id:image_id, action:action},
				success:function(data){
					Display();
					alert(data);
				}
			});
		}else{
			return false;
		}
	});
});

100

101

102

$(document).ready(function(){

var url = "action15.php"

//問い合わせ　一覧表示

Display();

//一覧表示

function Display()

{

var action = "Display";

$.ajax({

url: url,

method:"POST",

data:{action:action},

success:function(data)

{

$('#image_data').html(data);

}

})

}

//追加ボタンクリック

$(document).on('click','#add',function(){

$('#image_form')[0].reset();

$('.modal-title').text("画像の追加");

$('.modal-title').removeClass("text-warning");

$('.modal-title').removeClass("text-danger");

$('.modal-title').addClass("text-success");

$('#image_id').val('');

$('#action').val('insert');

$('#insert').val('登録');

$('#imageModal').modal('show');

});

//開いたフォームの登録　あるいは　変更ボタンクリック

$('#image_form').submit(function(event){

event.preventDefault();

var image_name = $('#image').val();

var formData = new FormData(this);

//for (item of formData) {

// console.log(item);

//}

if(image_name == ''){

alert("画像ファイルを選択してください");return false;

}else{

//UPLOADされた画像の拡張子を取得

var extension = $('#image').val().split('.').pop().toLowerCase();

if(jQuery.inArray(extension,['gif','png','jpg','jpeg']) == -1){

alert("GIF、PNG、JPG、JPEGファイルのみです");$('#image').val('');

return false;

}else{

$.ajax({

url: url,

method:"POST",

data: formData,

contentType:false,

processData:false,

success:function(data){

Display();

alert(data);

$('#image_form')[0].reset();

$('#imageModal').modal('hide');

}

});

}

});

//変更ボタンクリック

$(document).on('click','.update',function(){

$('#image_id').val($(this).attr("id"));//idを取得

//alert($(this).attr("id"));

$('.modal-title').text("画像の変更");

$('.modal-title').removeClass("text-success");

$('.modal-title').removeClass("text-danger");

$('.modal-title').addClass("text-warning");

$('#action').val("update");

$('#insert').val("変更");

$('#imageModal').modal('show');

});

//削除ボタンクリック

$(document).on('click','.delete',function(){

var image_id = $(this).attr("id");//idを取得

var action = "delete";

if(confirm("画像を削除しますが宜しいですか？")){

//alert(image_id);

$.ajax({

url: url,

method:"POST",

data:{image_id:image_id, action:action},

success:function(data){

Display();

alert(data);

}

});

}else{

return false;

}

});

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

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

<?php
//action11.php
$connect = new PDO("mysql:host=localhost;dbname=test;charset=utf8;",  'root',  'password' );
if(!$connect){
    echo "データベースに接続できません";
}

if( isset($_POST["action"]) )
{
    //問い合わせ　一覧表示
    if($_POST["action"] == "Display"){
        $output = '
            <table class="table table-bordered table-striped table-sm ">
                <tr>
                    <th width="10%" class="text-center">ID</th>
                    <th width="25%">画像</th>
                    <th width="45%">ファイル名</th>
                    <th width="10%" class="text-center">変更</th>
                    <th width="10%" class="text-center">削除</th>
                </tr>
        ';
        $sql = "select * from image_table order by id DESC";     
        $stmt = $connect->prepare($sql);
        $stmt->execute(); 
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            $path = 'images11/';
            $output .= '
                <tr>
                    <td class="text-center">'.$row["id"].'</td>                    
                    <td>
                        <img src="data:image/jpeg;base64,'.base64_encode(file_get_contents("images11/".$row['name'])).'" class="img-thumbnail" style="width:120px;height:auto">
                    </td>
                    <td class="text-left">'.$row["name"].'</td> 
                    <td class="text-center"><button type="button" name="update" class="btn btn-warning bt-xs update" id="'.$row["id"].'">変更</button></td>
                    <td class="text-center"><button type="button" name="delete" class="btn btn-danger bt-xs delete" id="'.$row["id"].'">削除</button></td>
                </tr>
            ';
        }
        $output .= '</table>';
        echo $output;
    }
    //ここまで問い合わせ　一覧表示

    //挿入
    if($_POST["action"] == "insert"){
        $uploaddir = './images11/';
        $uploadfile = $uploaddir . ($_FILES['image']['name']);
        $file = $_FILES["image"]["name"];
        $sql = 'INSERT INTO image_table(name) VALUE (:name)';
        $prepare = $connect->prepare($sql);    
        $prepare->bindValue(':name', $file, PDO::PARAM_STR);
        if( $prepare->execute() and move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile) ){
            echo "画像".$file."を登録しました";
        }else{
            echo "画像".$file."を登録できませんでした";
        }
    }

    //更新
    if($_POST["action"] == "update"){
        $uploaddir = './images11/';
        $uploadfile = $uploaddir . ($_FILES['image']['name']);
        $file = $_FILES["image"]["name"];
        $sql = 'UPDATE image_table SET name=:name WHERE id=:id'; 
        $prepare = $connect->prepare($sql);    
        $prepare->bindValue(':name', $file, PDO::PARAM_STR);
        $prepare->bindValue(':id', $_POST["image_id"], PDO::PARAM_INT);
        if( $prepare->execute() and move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile) ){
            echo "画像".$file."に変更しました";
        }else{
            echo "画像".$file."に変更できませんでした";
        }
    }

    //削除
    if($_POST["action"] == "delete"){
        //$uploaddir = './images11/';
        //$uploadfile = $uploaddir . ($_FILES['image']['name']);
        //$file = addslashes($_FILES["image"]["name"]);
        $sql = 'DELETE FROM image_table WHERE id=:id';
        $prepare = $connect->prepare($sql);    
        $prepare->bindValue(':id', $_POST["image_id"], PDO::PARAM_INT);
        if( $prepare->execute() ){
            echo "画像を削除しました";
        }else{
            echo "画像を削除できませんでした";
        }
    }  

}
?>

<?php

//action11.php

$connect = new PDO("mysql:host=localhost;dbname=test;charset=utf8;", 'root', 'password' );

if(!$connect){

echo "データベースに接続できません";

}

if( isset($_POST["action"]) )

{

//問い合わせ　一覧表示

if($_POST["action"] == "Display"){

$output = '

<tr>

<th width="45%">ファイル名</th>

</tr>

$sql = "select * from image_table order by id DESC";

$stmt = $connect->prepare($sql);

$stmt->execute();

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){

$path = 'images11/';

$output .= '

<tr>

<td>

</td>

</tr>

}

$output .= '</table>';

echo $output;

}

//ここまで問い合わせ　一覧表示

//挿入

if($_POST["action"] == "insert"){

$uploaddir = './images11/';

$uploadfile = $uploaddir . ($_FILES['image']['name']);

$file = $_FILES["image"]["name"];

$sql = 'INSERT INTO image_table(name) VALUE (:name)';

$prepare = $connect->prepare($sql);

$prepare->bindValue(':name', $file, PDO::PARAM_STR);

if( $prepare->execute() and move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile) ){

echo "画像".$file."を登録しました";

}else{

echo "画像".$file."を登録できませんでした";

}

//更新

if($_POST["action"] == "update"){

$uploaddir = './images11/';

$uploadfile = $uploaddir . ($_FILES['image']['name']);

$file = $_FILES["image"]["name"];

$sql = 'UPDATE image_table SET name=:name WHERE id=:id';

$prepare = $connect->prepare($sql);

$prepare->bindValue(':name', $file, PDO::PARAM_STR);

$prepare->bindValue(':id', $_POST["image_id"], PDO::PARAM_INT);

if( $prepare->execute() and move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile) ){

echo "画像".$file."に変更しました";

}else{

echo "画像".$file."に変更できませんでした";

}

//削除

if($_POST["action"] == "delete"){

//$uploaddir = './images11/';

//$uploadfile = $uploaddir . ($_FILES['image']['name']);

//$file = addslashes($_FILES["image"]["name"]);

$sql = 'DELETE FROM image_table WHERE id=:id';

$prepare = $connect->prepare($sql);

$prepare->bindValue(':id', $_POST["image_id"], PDO::PARAM_INT);

if( $prepare->execute() ){

echo "画像を削除しました";

}else{

echo "画像を削除できませんでした";

}

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

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

データベーステーブル

フロント側PHPファイル

jQueryファイル

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

Ajax、PHP、mySQLで和菓子情報WEBアプリ　作り方（select,insert,update,delete基本）

EXCEL VLOOKUP関数をVBAで表現

PHP　jQuery,Ajax解説記事の最新記事8件

PHPでショッピングカートを作成

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

Ajax、PHP、mySQLで和菓子情報WEBアプリ　作り方（select,insert,update,delete基本）

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

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

データベーステーブル

フロント側PHPファイル

jQueryファイル

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

Ajax、PHP、mySQLで和菓子情報WEBアプリ 作り方（select,insert,update,delete基本）

EXCEL VLOOKUP関数をVBAで表現

PHP jQuery,Ajax解説記事の最新記事8件

PHPでショッピングカートを作成

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

Ajax、PHP、mySQLで和菓子情報WEBアプリ 作り方（select,insert,update,delete基本）

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

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

Ajax、PHP、mySQLで和菓子情報WEBアプリ　作り方（select,insert,update,delete基本）

PHP　jQuery,Ajax解説記事の最新記事8件

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

Ajax、PHP、mySQLで和菓子情報WEBアプリ　作り方（select,insert,update,delete基本）