สอบถามการอัพโหลดภาพเเละบันทึกลงฐานข้อมูลครั้งล่ะหลายภาพ

ต้องการให้อัพโหลดภาพได้ครั้งล่ะหลายภาพค่ะ เเละสามารถเลือกลบภาพที่ไม่ต้องการจากภาพที่ preview ไม่ทราบว่าต้องทำยังไงบ้างค่ะ
ตอนนี้เลือกสามารถเลือกภาพได้หลายภาพ  เเต่ไม่สามารถลบภาพที่ไม่ต้องการได้ เเละอยากถามเรื่องการบันทึกลงฐานข้อมูลด้วยค่ะ ถ้าเราเลือกภาพหลายภาพเเล้วจะบันทึกลงฐานข้อมูลยังไงค่ะ จากโค้ดยังเป็นการบันทึกภาพเดียวอยู่ค่ะ

ต้องการให้อัพโหลดภาพได้ครั้งล่ะหลายภาพค่ะ เเละสามารถเลือกลบภาพที่ไม่ต้องการจากภาพที่ preview ไม่ทราบว่าต้องทำยังไงบ้างค่ะ
ตอนนี้เลือกสามารถเลือกภาพได้หลายภาพ  เเต่ไม่สามารถลบภาพที่ไม่ต้องการได้ เเละอยากถามเรื่องการบันทึกลงฐานข้อมูลด้วยค่ะ
ถ้าเราเลือกภาพหลายภาพเเล้วจะบันทึกลงฐานข้อมูลยังไงค่ะ จากโค้ดยังเป็นการบันทึกภาพเดียวอยู่ค่ะ

ไฟล์ gallery_create.php
 

<style type="text/css">  
        .drop-area{  
          width:100px; height:25px;  
          border: 1px solid #999; text-align: center;  
          padding:10px; cursor:pointer;  
        }  
        #thumbnail img{width:150px;height:150px;margin:5px;}  
        canvas{border:1px solid red;}      
    </style> 
<script src="js/jquery-1.8.3.min.js"></script>  
<script type="text/javascript" >  
$(function () {  
  
  
    $("#upload").on("click",function(e){  
        var objFile= $("<input>",{  
           "class":"filGalleryShot",  
            "type":"file",  
            "multiple":"true",  
            "name":"filGalleryShot",  
            "style":"display:none",  
                change: function(e){  
                    var files = this.files  
                    showThumbnail(files)      
                }  
        });  
        $(this).before(objFile);  
        $(".filGalleryShot:last").show().click().hide();  
        e.preventDefault();  
    });  
  
    function showThumbnail(files){  
  
    //    $("#thumbnail").html("");  
        for(var i=0;i<files.length;i  ){  
            var file = files[i]  
            var imageType = /image.*/  
            if(!file.type.match(imageType)){  
                //     console.log("Not an Image");  
                continue;  
            }  
  
            var image = document.createElement("img");  
            var thumbnail = document.getElementById("thumbnail");  
            image.file = file;  
            thumbnail.appendChild(image)  
  
            var reader = new FileReader()  
            reader.onload = (function(aImg){  
                return function(e){  
                    aImg.src = e.target.result;  
                };  
            }(image))  
  
            var ret = reader.readAsDataURL(file);  
            var canvas = document.createElement("canvas");  
            ctx = canvas.getContext("2d");  
            image.onload= function(){  
                ctx.drawImage(image,100,100)  
            }  
        } // end for loop  
  
    } // end showThumbnail  
  
  
      
      
});  
 </script> 
 
 
 <div class="head_on_page_news">

<span><h4>เพิ่มรูปในอัลบั้ม</h4></span>
<!--<span style="float:right">
<input type="button" name="button" value="ดูอัลบั้มทั้งหมด"  onclick="window.location='view_album.php'" class="btn btn-default">
</span>-->

</div>

<div id='newsfeed_contain'>
<div class='block_news_add_new'>

<form id="form1" name="form1" method="post" enctype="multipart/form-data" action="save_gallery.php?AlbumID=<?=$_GET["AlbumID"];?>" >

<div class="panel panel-default">
<div class="panel-body">
<table width='650px' >
<tr>
<td valign='top' width="160px" ><label>รูปภาพ:</label></td>
<td valign='top'>
<ul class="list-group">
  <li class="list-group-item"><input type="file" name="filGalleryShot" id="filGalleryShot" style="display:none"  multiple="true" />
  <div id="upload" class="btn btn-default">เเนบไฟล์  </div> 
  <div id="thumbnail"></div> 
  </li>
</ul> 
</td>
</tr>
</table>
</div>

<div class="panel-body">
<table width='650px' >
<tr>
<td colspan="2" valign='top'> <input name="Submit" type="submit" class="btn btn-default" id="Submit" value="   เพิ่มรูปภาพ   " /> 
<input name="Cancel" type="button" value="ยกเลิกการเพิ่มรูปภาพ" onClick="window.location='gallery_upload.php'" class="btn btn-default"/ > 
</td>
</tr>
</table>
</div>
  
</div>

    </form>
           
</div>
</div>

 

ไฟล์ save_gallery
 

<?php 

if(session_start() and $member_id > 0){
	//echo "กรุณาเข้าสู่ระบบใหม่อีกครั้งค่ะ";
	//echo "<meta http-equiv='refresh' content='1;URL=index.php'>";

}else{
	
	echo "กรุณาเข้าสู่ระบบใหม่อีกครั้งค่ะ";
	echo "<meta http-equiv='refresh' content='1;URL=index.php'>";
}


session_start();
include "connect.inc.php"; 

?>
<!--head html-->
<?php include_once 'head_html.php';?>

<html>
<head>
<?php include "title_name.html"; ?>
</head>
<body>
<?
	$fileName = date("YmdHis")."_".$_FILES["filGalleryShot"]["name"];
	if(move_uploaded_file($_FILES["filGalleryShot"]["tmp_name"],"album_pic/".$fileName))
	{
		//*** Insert Record ***//
		$strSQL = "INSERT INTO gallery ";
		$strSQL .="(AlbumID,GalleryShot) VALUES ('".$_GET["AlbumID"]."','".$fileName."')";
		
	}
	
	
	if(mysql_query($strSQL)){
		echo "<script language="JavaScript">";
		echo "alert('เพิ่มรูปเรียบร้อยเเล้วค่ะ');";
		echo "</script>";
		echo "<meta http-equiv='refresh'content='0;URL=album_manage.php'>";
		}
		else{
		echo "<meta http-equiv='refresh'content='1;URL=profile_wall.php'>";
		}
?>
<!--<a href="upload_gallery.php?AlbumID=<?=$_GET["AlbumID"];?>">View Gallery</a>-->
</body>
</html>

 

ชื่อ input file ใช้เป็น array เช่น name="file_upload[]"  มีปีกกาเปิดปิดด้านหลัง

ส่วนแนวทางการอัพหลายรูปดูกระทู้นี้เป็นแนวทาง

https://www.ninenik.com/forum_view_1299_1.html