作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在这段代码中,我添加了一个文件上传框和一个进度条来显示不起作用的进度
身份验证工作正常
<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 的错误:任务未在 HTMLInputElement 中定义。
最佳答案
您从未在代码中定义什么是 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
关于javascript - 进度条不起作用 文件正在上传 firebase,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60040193/
我有以下正则表达式 /[a-zA-Z0-9_-]/ 当字符串只包含从 a 到z 大小写、数字、_ 和 -。 我的代码有什么问题? 能否请您向我提供一个简短的解释和有关如何修复它的代码示例? //var
我是一名优秀的程序员,十分优秀!