Some text some message..
Some text some message..
Some text some message..
Some text some message..

Silahkan atau queue Daftar disini.

  • Beranda
  • »
  • Forum
  • »
  • Mendapatkan Nama File Beserta Ektensinya Dari Input Type File Pada Javascript

Mendapatkan Nama File Beserta Ektensinya Dari Input Type File Pada Javascript

Andre Isnawan

Andre Isnawan

30 Mei 2021, 11:19:30

Pada HTML terdapat input berjenis file yang memungkinkan user mengklik dan mengupload file menuju server. Saya ingin menanyakan bagaimana cara mendapatkan nama file dan juga ekstensi filenya ketika user mengklik input berjenis file.

Halaman HTML dan javascriptnya seperti ini :

<form action="" method="">
<label for="nama">Nama : </label>
<input type="text" name="nama" id="nama">
<label for="alamat">Alamat : </label>
<input type="text" name="alamat" id="alamat">
<label for="input_gambar">Attach gambar : </label>
<input type="file" name="input_gambar" id="input_gambar" accept="image/*">
<span id="span_nama_gambar">No File Selected</span>
<input type="submit" id="btn_kirim" value="Kirim">
</form>
<script>
$(document).ready(function(){
	$("#input_gambar").change(function(){
	//get file name
	var the_file = document.getElemetById("input_gambar");
	var file_name = the_file.files[0];
	$("#span_nama_gambar").html(file_name);
	
	});
});
</script>

Hasilnya masih belum bisa mendapatkan nama file dan juga ekstensi file.. terimakasih banyak atas jawabannya..

 

Tags : tag iconhtml tag iconjavascript tag iconjquery

  

facebooktwitterwhatapplinkedinpinterest

comment1 Jawaban, 662 view

Firdaus Cahyadi

Firdaus Cahyadi

30 Mei 2021, 11:39:21

Script di atas yang pastinya gk akan bisa mendapatkan nama filenya, karena baru mendapatkan array pada var file_name = the_file.files[0];, Untuk mendapatkan nama filenya dan juga ekstensinya dapat memakai cara javascrpt dan juga jquery jika ingin simple.

<script>
//javascript :
	var file_ = document.getElemetById("input_gambar");
	console.log("nama filenya : "+file_.files[0].name);
	alert("nama filenya : "+file_.files[0].name);
//jquery :
$(document).ready(function(){
	var file_name = $("#input_gambar")[0].files[0].name;
	alert("nama filenya : "+file_name);
});
</script>
  
Forum ini dibuat untuk menanyakan seputar permasalahan yang sering terjadi pada proses pembuatan halaman web pada HTML, desain web (CSS), pemrograman sisi client (JavaScript), pemrograman sisi server (PHP, ASP) beserta framework turunannya seperti codeigniter, Laravel, Yii. Forum ini tidak membatasi pertanyaan lainnya untuk bahasa program yang berbeda dengan orientasi website pada perangkat desktop dan smartphone.

Silahkan atau queue Daftar disini.

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Forum ini dibuat untuk menanyakan seputar permasalahan yang sering terjadi pada proses pembuatan halaman web pada HTML, desain web (CSS), pemrograman sisi client (JavaScript), pemrograman sisi server (PHP, ASP) beserta framework turunannya seperti codeigniter, Laravel, Yii. Forum ini tidak membatasi pertanyaan lainnya untuk bahasa program yang berbeda dengan orientasi website pada perangkat desktop dan smartphone.