Javascript Clear Html File Input Value

Javascript Clear Html File Input Value

3 min read Jun 20, 2024
Javascript Clear Html File Input Value

Cara Menghapus Nilai di Input File HTML dengan JavaScript

Dalam pengembangan web, kita seringkali membutuhkan cara untuk membersihkan nilai dari input file HTML. Mungkin kita ingin memberikan pengguna kesempatan untuk memilih file yang berbeda atau ingin mengosongkan input file setelah mengunggahnya. Artikel ini akan membahas bagaimana kita dapat menghapus nilai dari input file HTML menggunakan JavaScript.

Cara Kerja dan Contoh

1. Mengakses Elemen Input File:

Pertama, kita perlu mengakses elemen input file HTML yang ingin kita bersihkan. Kita bisa melakukannya dengan menggunakan document.getElementById():

const fileInput = document.getElementById('fileInput'); 

2. Mengatur Nilai Menjadi Kosong:

Setelah kita memiliki akses ke elemen input file, kita dapat mengatur nilainya menjadi kosong dengan menggunakan value = '':

fileInput.value = '';

3. Menghapus File yang Dipilih:

Jika ingin menghapus file yang dipilih pengguna, maka perlu menggunakan fileInput.files = null:

fileInput.files = null;

4. Menghapus File dan Mengosongkan Nilai:

Jika ingin menghapus file yang dipilih dan juga mengosongkan nilai input file, maka gabungkan kedua metode tersebut:

fileInput.files = null;
fileInput.value = '';

Contoh Implementasi:




    
    
    Clear File Input Value


    
    

    


Penjelasan:

Kode HTML di atas menampilkan input file dan tombol "Clear File". Saat tombol diklik, fungsi clearFileInput() akan dipanggil. Fungsi ini akan mengakses elemen input file dengan id fileInput dan kemudian mengatur nilainya menjadi kosong serta menghapus file yang dipilih.

Kesimpulan:

Dengan menggunakan JavaScript, kita dapat dengan mudah membersihkan nilai dari input file HTML. Ini dapat berguna untuk berbagai keperluan dalam pengembangan web, seperti mengizinkan pengguna untuk memilih file yang berbeda atau mengosongkan input setelah mengunggah file. Pastikan untuk mengakses elemen input file dengan benar dan menggunakan metode yang sesuai untuk membersihkan nilainya.