Question

我已经通过Firebase创建了一个WebApp，将文件上传到云存储，但是当我选择要上传的文件时，没有任何操作，选择文件操作不会上传文件。

我检查过以下内容：

存储规则：它们已打开
浏览器设置：所有浏览器都存在同样的问题。

下面是我的index.html文件，希望任何人都可以对这个奇怪的问题略有不足？

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test Upload App</title>
  <style media="screen">
    body {
      display: flex;
      min-height: 100vh;
      width: 100%;
      padding: 0;
      margin: 0;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    
    #uploader {
      -webkit-appearance: none;
      appearance: none;
      width: 50%;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>

  <progress value="0" max="100" id="uploader">0%</progress>
  <input type="file" value="upload" id="fileButton" />

  <script src="https://www.gstatic.com/firebasejs/4.13.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyCA7XWfS7deQaYGgaUaTWK-xxxxxxxxxxxx",
      authDomain: "testapp.firebaseapp.com",
      databaseURL: "https://test-project.firebaseio.com",
      projectId: "testproject",
      storageBucket: "testbucket_inbound/mydata/",
    };
    firebase.initializeApp(config);

    //Get Elements
    var uploader = document.getElementById('uploader');
    var fileButton = document.getElementById('fileButton');

    //Listen for file selection
    fileButton.addEventListener('change', function(e) {
      // Get file
      var file = e.target.files[0];

      // Create storage ref
      var storageRef = firebase.storage().ref('mydata/' + file.name);

      // upload file
      var task = storageRef.put(file);

      // update progress bar
      task.on('state_changed',

        function progress(snapshot) {
          var percentage = (snapshot.bytesTransferred /
            snapshot.totalBytes) * 100;
          uploader.value = percentage;
        },

        function error(err) {

        },

        function complete() {

        }

      );
    });
  </script>
</body>

</html>

Answer 1

您部署的页面中存在错误：

您在HTML中声明了按钮

<input type="file" value="upload" id="filebutton" />

但是你将EventListener设置在一个id为大写B

的按钮上

fileButton.addEventListener('change' , function(e) {

更改为

filebutton.addEventListener('change' , function(e) {

它应该有用。

您可以在浏览器控制台中看到错误：ReferenceError: fileButton is not defined

最后请注意，在您的问题的代码中，它是正确的！您可以在两个地方使用fileButton。

Firebase存储上传csv文件

1 个答案: