ต้องการสอบถามเรื่อง หน้าเพิ่มข้อมูล สามารถอัพโหลดหลายๆรูป โดยเวลาเพิ่มสามารถกดเพิ่มที่ละรูป สามารถลบก่อนส่งได้

ตอนนี้ที่ผมทำได้คือ เลือกไฟล์ทีเดียวหลายๆรูป ในคลังรูปภาพ แล้วกดเพิ่มได้ 
*แต่ที่ต้องการจริงๆคือ กด take Photo แล้วถ่ายเพิ่มไปที่ละรูปครับ

     
พอกดเพิ่มเสร็จ ตรง preview image จะสามารถลบรูปที่ถ่ายพลาดได้ ก่อนส่งข้อมูลครับ

และอยากได้ลดขนาดไฟล์รูปด้วยครับ ตอนนี้ขนาดไฟล์ใหญ่

อันนี้โค้ดปัจจุบันครับ 

ไฟล์ bridge_add.php
 

 <div class="form-group ">
                                <form action="bridge_add_db.php" method="post" enctype="multipart/form-data">

                                     <label>Select Image(s):</label>
                                        <input type="file" id="files" class="form-control" name="files[]"  multiple  require accept="image/*">
                                        <br />
                                        Preview Image
                                        <br />  
                                        <div id='result'></div>
                                        
                                    </div>
                                </div>

<script>

function previewImages() {

var preview = document.querySelector('#result');

if (this.files) {
  [].forEach.call(this.files, readAndPreview);
}

function readAndPreview(file) {

  // Make sure `file.name` matches our extensions criteria
  if (!/.(jpe?g|png|gif)$/i.test(file.name)) {
    return alert(file.name + " is not an image");
  } // else...
  
  var reader = new FileReader();
  
  reader.addEventListener("load", function() {
    var image = new Image();
    image.height = 200;
    image.title  = file.name;
    image.src    = this.result;
    preview.appendChild(image);
  });
  
  reader.readAsDataURL(file);
  
}

}

document.querySelector('#files').addEventListener("change", previewImages);

</script>



และไฟล์ bridge_add_db.php

$date1 = date("d-m-y_H.i.s_");