我使用 javascript 创建了一个 html 文件来将图像存储在 firebase 中，但是如果我运行 html 并单击选择文件，它会在控制台中显示错误

Question

这是我的代码，我运行将图像存储在 firebase 存储中我曾尝试将图像存储在 firebase 存储中，但是当我尝试这样做时，出现无法读取属性 of 'addEventListener' of null

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/css/bootstrap.min.css">
<title>FireBase Storage Using</title>
<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>
 <script>
// Initialize Firebase
 var config = {
 apiKey: "AIzaSyBi6A83TUkMJVx_iZRorFZwlFe6pePT05k",
 authDomain: "murugan-e9bb4.firebaseapp.com",
 databaseURL: "https://murugan-e9bb4.firebaseio.com",
 storageBucket: "murugan-e9bb4.appspot.com",
 };
 firebase.initializeApp(config);

//Get Elements
var uploader=document.getElementById('uploader');
var fileButton=document.getElementById('filebutton');

//Listen for the Selection
fileButton.addEventListener('change',function(e){
    //Get File
    var file=e.target.files[0];

    //Create Storage Place
    var storageref=FireBase.Storage().ref('Murugan/'+file.name);

    //upload file

    var task=storageref.put(file);

    //Update Progess Bar
    task.on('state_changed',

            function progress(snapshot){

                var percentage=(snapshot.bytesTransferred/snapshot.totalBytes)*100;
                uploader.value=percentage;                  
            },
            function error(err){

            },
            function complete(){

            }
        );

 });
</script>
<style media="screen">
body{
    display: flex;
    min-height: 100vh;
    width: 100%
    height: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"/>
</body>
</html>

This is the error I am getting when I try to choose file

任何帮助将不胜感激提前致谢

Answer 1

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<title>File Upload Using Firebase</title>
<style media="screen">
body{
    display: flex;
    min-height: 100vh;
    width: 100%
    height: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"></progress>
<input type="file" value="upload" id="fileButton"><br>
<div class="col-md-4">
<input type="text" class="form-control" id="fileLocation"></div>

<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script>
<script>

 var config = {
 apiKey: "AIzaSyBi6A83TUkMJVx_iZRorFZwlFe6pePT05k",
 authDomain: "murugan-e9bb4.firebaseapp.com",
 databaseURL: "https://murugan-e9bb4.firebaseio.com",
 storageBucket: "murugan-e9bb4.appspot.com",
 };
 firebase.initializeApp(config);
 var uploader=document.getElementById('uploader'),
 fileButton=document.getElementById('fileButton');

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

 var file=e.target.files[0];

 var storageRef=firebase.storage().ref("'/fileLocation/'"+file.name);
 console.log(fileLocation);

 var task=storageRef.put(file);

 task.on('state_changed',

        function progress(snapshot){
                var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
                uploader.value=percentage;
        if (percentage==100){
          alert("file uploaded Successfully");
        }
        },
        function error(err){

        },
        function complete(){

        }

    );
});
 </script>

 </body>
 </html>

我使用 javascript 创建了一个 html 文件来将图像存储在 firebase 中，但是如果我运行 html 并单击选择文件，它会在控制台中显示错误

I Created a html file with javascript to store a image in firebase but if i run the html and click choose file it shows a error in console

html

java

firebase

firebase-storage

我使用 javascript 创建了一个 html 文件来将图像存储在 firebase 中，但是如果我 运行 html 并单击选择文件，它会在控制台中显示错误

I Created a html file with javascript to store a image in firebase but if i run the html and click choose file it shows a error in console

html

java

firebase

firebase-storage

我使用 javascript 创建了一个 html 文件来将图像存储在 firebase 中，但是如果我运行 html 并单击选择文件，它会在控制台中显示错误