มีปัญหาเรื่องการอัพโหลดไฟล์ลง firebase storage ครับช่วยดูหน่อยครับ
หน้า console เว็บมันบอกว่าโค้ดที่มันบอกว่ามี error var storageRef=firebase.storage().ref("Picture/"+file.name);
โค้ดเต็ม <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style form.css">
<script src="https://kit.fontawesome.com/ac4dfd0a23.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="icon" type="image/gif/png" href="images/logo.jpg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected] /font/bootstrap-icons.css">
<title>About Inkjet</title>
<style>
.image-preview{
width: 50%;
min-height: 100px;
border: 2px solid #dddddd;
margin-top : 15px;
/*Default text*/
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #cccccc;
margin-left: 15%;
}
.image-preview__image{
display:none;
width: 100%;
}
#uploader{
margin-left:15%;
}
</style>
</head>
<?php
require_once('header.php');
?>
<body>
<!-- Page Wrapper -->
<div class="page-wrapper">
<!-- Form -->
<div class="container">
<form action="process.php" method="POST" enctype="multipart/form-data">
<center><h2>กรอกข้อมูลของท่าน</h2></center>
<div>
<div class="box">
<label for="file">อัพโหลดรูป</label>
<input type="file" accept=".jpg,.png,.jpeg" name="pic" id="inpFile" />
<div class="image-preview" id="imagePreview">
<img src="" alt="Image Preview" class="image-preview__image">
<span class="image-preview__default-text">Image Preview</span>
</div>
<script>
const inpFile = document.getElementById("inpFile");
const previewContainer = document.getElementById("imagePreview");
const previewImage = previewContainer .querySelector(".image-preview__image");
const previewDefaultText = previewContainer .querySelector(".image-preview__default-text");
inpFile.addEventListener("change", function(){
const file = this.files[0];
if (file) {
const reader = new FileReader();
previewDefaultText.style.display = "none";
previewImage.style.display = "block";
reader.addEventListener("load", function() {
console.log(this);
previewImage.setAttribute("src", this.result);
});
reader.readAsDataURL(file);
}
});
</script>
<progress value="0" max="100" id="uploader">0%</progress>
<label for="size">ขนาดป้าย</label>
<select name="select" id="size" required>
<option id="size" name="slct" value="" selected> เลือกขนาดป้ายไวนิล</option>
<option id="size" name="slct1" value="1x1 เมตร,200" > 1x1 เมตร ราคา 200 บาท</option>
<option id="size" name="slct2" value="1x2 เมตร,300" >1x2 เมตร ราคา 300 บาท</option>
<option id="size" name="slct3" value="1x3 เมตร,450"> 1x3 เมตร ราคา 450 บาท</option>
<option id="size" name="slct4" value="1.20x2.40 เมตร,450" > 1.20x2.40 เมตร ราคา 450 บาท</option>
<option id="size" name="slct5" value="1.50x3 เมตร,750" > 1.50x3 เมตร ราคา 750 บาท</option>
<option id="size" name="slct6" value="2x4 เมตร,1,200"> 2x4 เมตร ราคา 1,200 บาท</option>
</select><br>
<label for="amou">จำนวน</label>
<input type="text" id="amount" name="amount" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))"placeholder="จำนวน" required><br>
<label for="phnum">เบอร์ติดต่อ</label>
<input type="tel" id="phnum" name="phone" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" placeholder="Your phone.." required><br>
<label for="subject">รายละเอียด</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:100px" required></textarea>
<br>
<label for="name"><i class="fa fa-user"></i> ชื่อ-นามสกุล</label>
<input type="text" id="name" name="name" placeholder="ชื่อ-นามสกุล" required>
<label for="email"><i class="fa fa-envelope"></i> อีเมล</label>
<input type="email" id="email" name="email" placeholder="[email protected] " required>
<label for="adr"><i class="fa fa-address-card-o"></i> ที่อยู่</label>
<input type="text" id="adr" name="address" placeholder="542 W. 15th Street" required>
<label for="city"><i class="fa fa-institution"></i> จังหวัด</label>
<input type="text" id="city" name="city" placeholder="Bangkok" required>
<label for="zip"><i class="bi bi-mailbox"></i> รหัสไปรษณีย์</label>
<input type="number" id="zip" name="zip" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))"" placeholder="10001" required>
</div>
<input type="submit" name="submit" id="submit" value="ยืนยัน">
</form>
</div>
</div>
</div>
</div>
</div>
<!-- End PageWrapper -->
</body>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
import { getStorage } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-storage.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDAmerIVJpJVQMbpX1aTPHTkKuT1ULM_Gw",
authDomain: "aboutinkjet-e6e0c.firebaseapp.com",
projectId: "aboutinkjet-e6e0c",
storageBucket: "aboutinkjet-e6e0c.appspot.com",
messagingSenderId: "7922742945",
appId: "1:7922742945:web:124d23113a55778727e2e0",
measurementId: "G-4SETNPDNPB"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const storage = getStorage(app);
var uploader=document.getElementById("submit");
var fileButton = document.getElementById("inpFile");
fileButton.addEventListener('change',function(e){
var file=e.target.files[0];
var storageRef=firebase.storage().ref("Picture/"+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){
console.log(err.message);
},function complete(){
console.log("Upload Complete!!!");
});
});
</script>
<?php
require_once('Footer.php');
?>
</html>
Tag HTML, JavaScript, Cloud Database
Date :
2021-09-06 11:02:07By :
ArnoView :
747Reply :
0
Server 00
Load balance : Server 00
