Question

我有四个带有各自ID的上传按钮。

<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>

使用此功能，我可以通过一个按钮上传到Firebase存储

$("#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() {

    });
})

该功能很好用，但是我要防止重复的功能。我想对每个上传输入和上传者状态使用该功能。我试过了，但是没用

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

如何为每个上传者和上传者使用相同的功能？

这是jsfiddle https://jsfiddle.net/dhs8g7fb/

Answer 1

这是一个有效的代码！

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>

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

1 个答案: