如何将一个功能用于多个文件上传按钮

Question

I have four upload buttons with their respective ids.

<div class="card-body">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="mainDiv" align="right">
                    <progress id="uploader" value="0" max="100">0%</progress>
                    <input type="file" id="fileButton" value="upload" />
                </div>
            </div>
            <div class="col-6">
                <div class="mainDiv" align="right">
                    <progress id="uploader" value="0" max="100">0%</progress>
                    <input type="file" id="fileButton" value="upload" />
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-6">
                <div class="mainDiv" align="right">
                    <progress id="uploader2" value="0" max="100">0%</progress>
                    <input type="file" id="fileButton2" value="upload" />
                </div>
            </div>
            <div class="col-6">
                <div class="mainDiv" align="right">
                    <progress id="uploader3" value="0" max="100">0%</progress>
                    <input type="file" id="fileButton3" value="upload" />
                </div>
            </div>
        </div>
    </div>
</div>

I am able to upload to firebase storage through one button with this function

$("#fileButton").on('change', function(e) {
    var file = evt.target.files[0];
    var storageRef = firebase.storage().ref('img/' + file.name);
    var task = storageRef.put(file);
    task.on('state_changed', function progress(snapshot) {
        var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        uploader.value = percentage;
    }, function error(err) {

    }, function complete() {

    });
})

the function works great but what I want to do is to prevent duplicating functions. I want to use that function for each of the upload input and uploader status. I tried this but it does not work

 $("#fileButton0", "#fileButton1", "#fileButton2", "#fileButton3").on('change'

how could I use the same function for each of the upload and uploader?

here is the jsfiddle https://jsfiddle.net/dhs8g7fb/

Answer 1

Here is a working code !

 const FileBtns = document.querySelectorAll("input[type='file'][id]"); FileBtns.forEach(function(btn) { btn.addEventListener("change", function(e) { console.log(this); var file = e.target.files[0]; var storageRef = firebase.storage().ref('img/' + file.name); var task = storageRef.put(file); task.on('state_changed', function progress(snapshot) { var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100; uploader.value = percentage; }, function error(err) { //Some error task }, function complete() { console.log("we dit"); }); }); }); 

 <div class="card-body"> <div class="container"> <div class="row"> <div class="col-6"> <div class="mainDiv" align="right"> <progress id="uploader0" value="0" max="100">0%</progress> <input type="file" id="fileButton0" value="upload" /> </div> </div> <div class="col-6"> <div class="mainDiv" align="right"> <progress id="uploader1" value="0" max="100">0%</progress> <input type="file" id="fileButton1" value="upload" /> </div> </div> </div><br> <div class="row"> <div class="col-6"> <div class="mainDiv" align="right"> <progress id="uploader2" value="0" max="100">0%</progress> <input type="file" id="fileButton2" value="upload" /> </div> </div> <div class="col-6"> <div class="mainDiv" align="right"> <progress id="uploader3" value="0" max="100">0%</progress> <input type="file" id="fileButton3" value="upload" /> </div> </div> </div> </div> </div>