如何在Firebase中使用HTML和JavaScript上传图像

Firebase 是谷歌的产品，可帮助开发人员轻松构建、管理和增长他们的应用程序。它帮助开发人员更快、更安全地构建应用程序。在Firebase端不需要编程，这使得更容易更高效地使用其功能。它提供云存储，并使用NoSQL来存储数据。

在这里，我们将学习如何在Firebase中使用HTML和JavaScript上传图像。在使用数据库时，我们可能需要上传图像文件。

逐步实施

步骤1： 如果您是Firebase的新手，请参考此处。

激活Firebase存储：

单击左侧的“存储”按钮，然后点击开始。

如何在Firebase中使用HTML和JavaScript上传图像

之后会弹出这个框。点击 下一步 。

如何在Firebase中使用HTML和JavaScript上传图像

然后点击完成。

如何在Firebase中使用HTML和JavaScript上传图像

步骤2： 在这里，我们将编写Html和JavaScript代码，将Html代码与Firebase数据库连接起来。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Collecting Data</title>
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
          crossorigin="anonymous">
 
</head>
 
<body class="container"
      style="margin-top: 50px;
             width: 50% height:auto; ">
 
    <h2 class="text-primary"
        style="margin-left: 15px; margin-bottom: 10px">
              Hey There,Here we are going to upload
    </h2>
    <form class="container" id="contactForm">
        <div class="card">
            <div class="card-body">
 
                <div class="form-group"
                     style="margin-left: 15px; 
                            margin-top: 10px;
                            display:none;>
    <label for=" exampleFormControlSelect1 ">Select Type</label>
    <select class="form-control " id="types ">
      <option>1</option>
    </select>
  </div>
 
<br>
    Document Upload:
    <br>
    <!-- click here to choose file -->
    <input type="file " name="files[] " id="files ">
    <!-- click here to upload file -->
    <input type="hidden "
           name="url "
           id="url ">    
           <button type="button " onclick="uploadimage() ">
               Upload Image
            </button>
           <br><br>
  </div>
</div>
 
<button type="submit "
        class="btn btn-primary "
        style="margin-left: 15px; margin-top: 10px; display:none; ">
                Submit
  </button>
 
</form>
</body>
<script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js ">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js ">
</script>
 
<link type="text/css " rel="stylesheet " href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css " />
 
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js ">
</script>
 
<script>
  
 
  
 // adding firebase data
   var firebaseConfig = {
    apiKey: "*********************- ",
    authDomain: "-********************* ",
    databaseURL: "********************* ",
    projectId: "********************* ",
    storageBucket: "********************* ",
    messagingSenderId: "********************* ",
    appId: "********************* "
  };
  firebase.initializeApp(firebaseConfig);
  var messagesRef = firebase.database().ref('Checking');
  document.getElementById(
     'contactForm').addEventListener('submit', submitForm);
 //uploading file in storage
  function uploadimage(){
     var type = getInputVal('types');
  var storage = firebase.storage();
  var file=document.getElementById("files ").files[0];
  var storageref=storage.ref();
  var thisref=storageref.child(type).child(file.name).put(file);
  thisref.on('state_changed',function(snapshot) {
 
 
  }, function(error) {
  
 }, function() {
  // Uploaded completed successfully, now we can get the download URL
  thisref.snapshot.ref.getDownloadURL().then(function(downloadURL) {
    //getting url of image
    document.getElementById("url ").value=downloadURL;
    alert('uploaded successfully');
    saveMessage(downloadURL);
   });
  });
 
  // Get values
  var url = getInputVal('url');
  // Save message
  // saveMessage(url);
}
function getInputVal(id){
    document.getElementById('contactForm').reset();
 
}
 
 
// Function to get form values
function getInputVal(id){
  return document.getElementById(id).value;
}
 
// Save message to firebase database
function saveMessage(url){
  var newMessageRef = messagesRef.push();
  newMessageRef.set({
   imageurl:url,
  });
}
</script>
</html>

在你编写完代码后，可以使用以下命令在终端中运行：