進度條不起作用 文件正在上傳 firebase
[英]progress bar is not working file is uploading firebase
問題描述
在這段代碼中，我添加了一個文件上傳框和一個進度條來顯示不工作的進度
身份驗證工作正常
<html>
<head>
<title> firebase save</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.9.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
//initialization
};
firebase.initializeApp(config);
var uploader = document.getElementById('uploader');
var fileButton = document.getElementById('fileButton');
fileButton.addEventListener('change' , function(e) {
var file= e.target.files[0];
var storageRef = firebase.storage().ref('pics/' + file.name);
storageRef.put(file);
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>
文件上傳成功但進度條沒有顯示任何指示
控制台會拋出一個名為 Uncaught ReferenceError: task is not definedat HTMLInputElement 的錯誤。
1 個解決方案
解決方案1
3 已采納 2020-02-03 13:34:00
您永遠不會在代碼中定義task變量是什么，因此會出現錯誤。
你應該這樣做：
var file= e.target.files[0];
var storageRef = firebase.storage().ref('pics/' + file.name);
var task = storageRef.put(file); // <--- See the difference here
task.on('state_changed' ,
function progress(snapshot){
var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
uploader.value = percentage;
},
function error(err){
},
function complete(){
}
文檔和參考： https : //firebase.google.com/docs/storage/web/upload-files#monitor_upload_progress和https://firebase.google.com/docs/reference/js/firebase.storage.UploadTask
jQuery文件上傳進度條
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.