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

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

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

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

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


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

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

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

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

ไฟล์ bridge_add.php
 

1
2
<div class="form-group ">
                               <form action="bridge_add_db.php" method="post" enctype="multipart/form-data">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
                                     <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
1
$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 23-02-2020 13:06:07

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

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


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


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

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


  

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


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

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


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


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


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

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




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


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


Pitchakorn Baramee 24-02-2020 21:39
 ความคิดเห็นที่ 6
ตอนแก้ไข ใช้ input hidden ในฟอร็ม เก็บชื่อไฟล์ทั้งหมด ที่เคยอัพโหลด ในรูปแบบ array
เช่น
1
2
3
<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 ที่ส่งไป
ด้วยหรือไม่ ถ้าซ้ำก็ไม่ต้องอัพโหลด หรืออัพโหลดเฉพาะที่ไม่ซ้ำ แนวทางคำสั่ง
 
1
2
3
if(!in_array("ชื่อตัวแปร หรือไฟล์ที่อัพโหลด", $_POST['exists_files'])){ // ไฟล์อัพโหลดไม่มีอยู่ก่อน
   // อัพโหลดได้
}


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


Pitchakorn Baramee 25-02-2020 18:03
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ