<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”
• คุณสามารถปรับแต่งโค้ดเพิ่มเติมตามความต้องการของคุณ