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

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

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

https://www.codehim.com/demo/jquery-image-uploader-preview-and-delete/   

ผมเจอตัวนี้ ซึ่งทำงานได้แล้วครับ แต่ว่า ปัญหาคือไม่สามารถรันบนเบราว์เซอร์ สมาร์ทโฟนได้ ซึ่งงานทำบน สมาร์ทโฟน เป็นหลักเลยอยากได้โค้ดประมาณนั้นครับ


ตอนนี้ที่ผมทำได้คือ เลือกไฟล์ทีเดียวหลายๆรูป ในคลังรูปภาพ แล้วกดเพิ่มได้ 
*แต่ที่ต้องการจริงๆคือ กด 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_");
 
$uploadDir = 'imagesbridge/';
    $allowTypes = array('jpg','png','jpeg','gif');
 
    if(!empty(array_filter($_FILES['files']['name']))){
        foreach($_FILES['files']['name'] as $key=>$val){
            $filename =   ($_FILES['files']['name'][$key]);
 
 
            
            $numrand = (mt_rand(0,9999));
            //ตั้งชื่อไฟล์รูปไม่ให้ซ้ำ
                $newname = $tbb_name.$date1.$numrand.".jpg";
                $targetFile = $uploadDir.$newname ;
 
 
 
            
            if(move_uploaded_file($_FILES["files"]["tmp_name"][$key], $targetFile)){
                $success[] = "Uploaded $newname ";
                $path_link="imagesbridge/";
                $insertQrySplit[] = "('$newname ','$path_link')";
 
            }
            else {
                
                $errors[] = "Something went wrong- File - $newname ";
            }
        }

 



Pitchakorn Baramee 125.27.227.xxx 23-02-2020 13:06:07

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ตัวที่ใช้อยู่ ดูแล้วรองรับตามที่ต้องการ แต่ให้ใช้เป็นแบบตัวอย่างแรก


  

ส่วนการลดขนาด ไม่น่าจะทำได้ที่ส่วนของ javascript ถ้าจะใช้ตอนถ่ายรูปแล้วอัพโหลด อาจจะดูเรื่องการกำหนด
การตั้งค่าของการถ่ายรูป ให้ได้ขนาดไฟล์ไม่ใหญ่เกินไป


ninenik 27.55.71.xxx 23-02-2020
 ความคิดเห็นที่ 2
 

อันนี้คือใช้งานบนคอมได้ตรงตามความต้องการเลยครับ แต่มันไม่ทำงานบนโทรศัพท์เลยครับ อันนี้ผมเข้าหน้าเว็บของเขา ก็ไม่ทำงานแล้วครับ


Pitchakorn Baramee 125.27.227.xxx 23-02-2020 19:38
 ความคิดเห็นที่ 3
น่าจะไม่รองรับสำหรับการมใช้งานใน safari หรือ ios คงเป็นข้อจำกัด
ลองเป็นบราวเซอร์อื่นดู 
    หรือประยุกต์เนื้อหาจากบทความด้านล่างเป็นแนวทาง


บทความแนะนำที่เกี่ยวข้อง
แสดงตัวอย่าง รูปภาพ ก่อนอัพโหลด ด้วย html5 อย่างง่ายอ่าน 16,184
ninenik 27.55.71.xxx 23-02-2020
 ความคิดเห็นที่ 4
ขอบคุณครับ


Pitchakorn Baramee 101.51.108.xxx 23-02-2020 21:05
 ความคิดเห็นที่ 5
ขอบคุณอีกครั้งครับ ผมได้นำบทความที่แนะนำไปประยุกต์ใช้ สามารถใช้งานได้ตามที่ต้องการแล้วครับ

แต่ผมเหลืออีก 1 อย่างคือ หน้าแก้ไขข้อมูล 




หน้านี้จะดึงรูปภาพ จากฐานข้อมูล มาโชว์ก่อน จากนั้นสามารถกด ลบได้ และ สามารถเพิ่มได้


ตรงเอาเข้าฐานข้อมูล ผมจะนำข้อมูลตอนที่กดลบ ไปลบในฐานข้อมูลรูป 
และก็นำรูปที่เพิ่มใหม่ โดยเช็คถ้ามีชื่อรูปเดิมอยู่แล้ว ไม่ต้องเพิ่ม แล้วจะนำที่เพิ่ม ไปเพิ่มในฐานข้อมูล


Pitchakorn Baramee 182.232.48.xxx 24-02-2020 21:39
 ความคิดเห็นที่ 6
ตอนแก้ไข ใช้ input hidden ในฟอร็ม เก็บชื่อไฟล์ทั้งหมด ที่เคยอัพโหลด ในรูปแบบ array
เช่น
<input type="hidden" name="exists_files[]" value="a.jpg">
<input type="hidden" name="exists_files[]" value="b.jpg">
<input type="hidden" name="exists_files[]" value="c.jpg">
ในขั้นตอนการอัพโหลดไฟล์ เช็คว่าชื่อที่ทำการอัพโหลดเข้าไป ซ้ำกับชื่อจาก input hidden ที่ส่งไป
ด้วยหรือไม่ ถ้าซ้ำก็ไม่ต้องอัพโหลด หรืออัพโหลดเฉพาะที่ไม่ซ้ำ แนวทางคำสั่ง
 
if(!in_array("ชื่อตัวแปร หรือไฟล์ที่อัพโหลด", $_POST['exists_files'])){ // ไฟล์อัพโหลดไม่มีอยู่ก่อน
   // อัพโหลดได้
}


ninenik 171.96.174.xxx 25-02-2020
 ความคิดเห็นที่ 7
ตอนี้ผมติดจะ SELECT จาก database ยังให้ให้มาเข้า script ที่สามารถกดลบได้


Pitchakorn Baramee 49.230.27.xxx 25-02-2020 18:03
1






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ