如何使用 Firebase 上传多个文件？

Question

$("#fileButton1, #fileButton2, #fileButton3").on("change", function(event) {
  selectedFile = event.target.files[0];
});

    function uploadFile() {

      var filename = selectedFile.name;
      var storageRef = firebase.storage().ref('/files_new/' + filename);
      var uploadTask = storageRef.put(selectedFile);

      uploadTask.on('state_changed', function progress(snapshot){

        var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        uploader.value = percentage;

      }, function(error) {

      }, function () {
        window.location.href = "uploadThumbnail.html";
      });
    }

<form class="upload-form">
<progress value="0" max="100" id="uploader">0%</progress>
<input value="upload" id="fileButton1" class="choose-file-btn" type="file">
<input value="upload" id="fileButton2" class="choose-file-btn" type="file">
<input value="upload" id="fileButton3" class="choose-file-btn" type="file">
<button type="button" class="submit-btn" onclick="uploadFile()">Continue</button>
</form>

即使我选择了多个，上面的代码也只上传一个文件。我怎样才能让它推动所有 被选中的文件。

Answer 1

根据我了解的 cmets，您需要多个输入文件并且您想一次发送所有文件

通过保留以下代码作为参考，按照您的要求进行操作

$(document).ready(function(){
    var filesList = [],
        paramNames = [],
        elem = $("form");
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.push(data.files[0]);
        paramNames.push(e.delegatedEvent.target.name);
    });

    $("button").click(function(e){
        e.preventDefault();
        file_upload.fileupload('send', {files:filesList, paramName: paramNames});
    })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/echo/json/" method="POST">
    <input name="file1[]" type="file" multiple />
    <br />  <br />
    
    <input name="file2[]" type="file" multiple />
    <br />  <br />
    
    <input name="file3[]" type="file" multiple />
    <br />  <br />
 
    <button>send by fileupload send api</button>
</form>

您可以在此处在一个输入文件中选择多个文件

Answer 2

您可以在上传之前将所有选定的文件保存到一个数组中：

var selectedFiles = [];

$("#fileButton1, #fileButton2, #fileButton3").on("change", function(event) {
    var id = $(this).prop('id');
    var item = selectedFiles.find(x => x.id === id);
    if (!item) {
        // if the array doesn't contain any file with this id
        // try to push an object which contains id and the file to the array
        selectedFiles.push({
            id: id,
            file: event.target.files[0]
        });
    } else {
        // if the array already contains some file with this id
        // try to update the file 
        item.file = event.target.files[0];
    }
});

function uploadFile() {
    // uploading file one-by-one
    for (var item of selectedFiles) {
        var filename = item.file.name;
        var storageRef = firebase.storage().ref('/files_new/' + filename);
        var uploadTask = storageRef.put(item.file);

        uploadTask.on('state_changed', function progress(snapshot) {

            var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            uploader.value = percentage;

        }, function(error) {

        }, function() {
            window.location.href = "uploadThumbnail.html";
        });
    }

}