<form method="post" enctype="multipart/form-data" action="">
  <span id="filename">Select your file</span>
    <label for="file-upload">Browse<input type="file" id="file-upload"></label>
</form>
<script>
$('#file-upload').change(function() 
    var filepath = this.value;
    var m = filepath.match(/([^\/\\]+)$/);
    var filename = m[1];
    $('#filename').text(filename);
});
</script>

Saya hanya ingin bantuan untuk mengimplementasikan tombol kirim sehingga masing-masing tidak akan menggunakan id nama file terpisah yang kami gunakan di sini. Saya baru mengenal js dan memiliki banyak tombol unggah file di proyek saya dan ketika saya menggunakan kelas, setiap perubahan nama file hanya tercermin pada satu tombol.

2
halfbloodprince 13 Mei 2021, 10:20

1 menjawab

Jawaban Terbaik

Sangat cepat disatukan menggunakan Javascript Vanilla ~ pada dasarnya jika ada beberapa elemen input file dan Anda menginginkan fungsionalitas yang sama untuk masing-masing maka Anda ingin mendapatkan referensi ke koleksi nodelist ( querySelectorAll akan mengembalikan nodelist ) dan, untuk masing-masing, tetapkan event handler change. Menggunakan kombinasi parentNode dan previousElementSibling Anda dapat mengidentifikasi elemen span dan memodifikasinya dengan cukup mudah.

Pengunggahan file yang sebenarnya dapat ditangani oleh handler change dan modifikasi pada DOM dilakukan sebagai akibatnya.

    document.querySelectorAll('input[type="file"]').forEach( input=>{
        input.addEventListener('change',function(e){
            this.parentNode.previousElementSibling.textContent=this.value.match(/([^\/\\]+)$/)[1];
            this.parentNode.textContent='Uploading...';
        });
    });
<form method='post' enctype='multipart/form-data'>
    <span>Select your file</span>
    <label for='file-upload'>Browse<input type='file' /></label>
</form>

<form method='post' enctype='multipart/form-data'>
    <span>Select your file</span>
    <label for='file-upload'>Browse<input type='file' /></label>
</form>
2
Professor Abronsius 13 Mei 2021, 07:38