• February 7, 2024
    <input type="file" id="upload">

    วิธีที่ 1: ใช้ display: none

    JavaScript

    const upload = document.getElementById('upload');
    
    upload.addEventListener('change', function() {
      this.style.display = 'none';
    });
    

    Use code with caution. Learn morecontent_copy

    โค้ดนี้ใช้ addEventListener เพื่อฟังการเปลี่ยนแปลงของปุ่ม “upload” เมื่อมีการเปลี่ยนแปลง (เช่น มีการเลือกไฟล์) โค้ดจะตั้งค่าสไตล์ display ของปุ่มเป็น none ซึ่งจะซ่อนปุ่ม

    วิธีที่ 2: ลบปุ่มออกจาก DOM

    JavaScript

    const upload = document.getElementById('upload');
    
    upload.addEventListener('change', function() {
      this.parentNode.removeChild(this);
    });
    

    Use code with caution. Learn morecontent_copy

    โค้ดนี้ใช้ addEventListener เช่นกัน เมื่อมีการเปลี่ยนแปลง โค้ดจะลบปุ่ม “upload” ออกจาก DOM (Document Object Model) โดยใช้ parentNode.removeChild

    วิธีที่ 3: ใช้ classList.add

    JavaScript

    const upload = document.getElementById('upload');
    
    upload.addEventListener('change', function() {
      this.classList.add('hidden');
    });
    
    

    Use code with caution. Learn morecontent_copy

    โค้ดนี้ใช้ addEventListener เช่นกัน เมื่อมีการเปลี่ยนแปลง โค้ดจะเพิ่มคลาส “hidden” ไปยังปุ่ม “upload” โดยใช้ classList.add คลาส “hidden” นี้ควรมี CSS กำหนด display: none

    ตัวอย่าง:

    HTML

    <input type="file" id="upload">
    <br>
    <img id="image" style="max-width:850px;">
    

    Use code with caution. Learn morecontent_copy

    JavaScript

    const upload = document.getElementById('upload');
    
    upload.addEventListener('change', function() {
      this.style.display = 'none';
    });
    

    Use code with caution. Learn morecontent_copy

    หมายเหตุ:

    • วิธีการเหล่านี้ทำงานใน JavaScript เวอร์ชันใหม่ ๆ
    • ตรวจสอบให้แน่ใจว่าคุณมี ID ที่ถูกต้องสำหรับปุ่ม “upload”
    • คุณสามารถปรับแต่งโค้ดเพิ่มเติมตามความต้องการของคุณ


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories