本文介绍如何使用JavaScript和Firebase平台构建一个轻量级的文件共享Web应用。通过Firebase Storage存储文件，利用实时数据库管理元数据，生成唯一ID实现安全共享。文件被下载后自动删除，确保隐私安全。文章包含上传、下载、生成ID及保存元数据的完整代码示例与操作步骤。
Any Share 是一款简洁、轻量且高效的文件共享服务，采用 JavaScript 开发，并部署于 Firebase 平台之上。
功能特性
支持文件上传操作。
支持文件下载操作。
支持文件删除操作。
支持文件分享功能。
支持在线查看文件。
提供安全的文件共享机制。
技术说明
Any Share 利用 Firebase Storage 进行文件存储，同时使用 Firebase 实时数据库来保存文件的元数据信息。
在上传文件时，文件会被存储至 Firebase 并生成一个唯一的 ID，该 ID 是访问文件的凭证。
文件的元数据，包括文件 URL 和唯一 ID，被保存在 Firebase 实时数据库中。
分享文件时，只需提供该文件的唯一 ID，接收者即可通过此 ID 访问文件。
文件接收方利用获得的唯一 ID 即可访问目标文件。
当接收方使用唯一 ID 获取文件时，系统会从 Firebase 存储中下载文件并展示给接收方。
接收方成功获取文件后，系统会自动从 Firebase 存储中删除该文件。
这种机制确保了文件共享的安全性，防止文件被长期留存或滥用。
使用方法
- 访问 anyshare 网站。
- 选择并上传一个文件。
- 等待文件上传完成。
- 将生成的文件唯一 ID 分享给接收者。
- 接收方输入该唯一 ID 即可访问文件。
- 接收方下载文件后，源文件会自动从 Firebase 存储中移除。
代码解析
Firebase 存储上传逻辑代码
function uploadFile() {
if(document.getElementById("file").value != ""){
var uploadtext = document.getElementById("upload").innerHTML;
document.getElementById("upload").innerHTML = "Uploading...";
var file = document.getElementById("file").files[0];
var storageRef = firebase.storage().ref("images/" + file.name);
var uploadTask = storageRef.put(file);
uploadTask.on('state_changed', function (snapshot) {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
}, function (error) {
console.log(error.message);
document.getElementById("upload").innerHTML = "Upload Failed";
}, function () {
uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
console.log('File available at', downloadURL);
saveMessage(downloadURL);
});
});
}
else{
var uploadtext = document.getElementById("upload").innerHTML;
document.getElementById("upload").innerHTML = "Please select a file";
// 2秒后清空
setTimeout(function(){
document.getElementById("upload").innerHTML = uploadtext;
}
, 2000);
}
}Firebase 存储下载逻辑代码
function showfile() {
var uniqueId = document.getElementById("unique").value;
if (uniqueId == "") {
alert("Unique Id is empty\n Please enter a Unique Id");
return;
}
var ref = firebase.database().ref("image");
var flag = 0;
ref.on("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childData = childSnapshot.val();
if (childData.number == uniqueId) {
flag = 1;
window.open(childData.url, "_blank");
// 然后从数据库中删除图像
ref.child(childSnapshot.key).remove();
// 从存储中删除文件
// 延迟5秒运行
setTimeout(function() {
var storageRef = firebase.storage().refFromURL(childData.url);
storageRef.delete().then(function() {
ref.child(childSnapshot.key).remove();
// 文件删除成功
}).catch(function(error) {});
}, 15000);
}
});
});
}唯一 ID 生成逻辑代码
function createUniquenumber(){
// 为尚未在数据库字段编号中的每个图像创建一个唯一的5位数
var number = Math.floor(10000 + Math.random() * 90000);
var ref = firebase.database().ref("image");
ref.on("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childData = childSnapshot.val();
if (childData.number == number){
createUniquenumber();
}
});
});
return number;
}在 Firebase 实时数据库中保存文件元数据的代码
function saveMessage(downloadURL) {
var newMessageRef = messagesRef.push();
var unique= createUniquenumber();
// 隐藏接收文件 div
var x = document.getElementById("downloadiv");
x.style.display = "none";
var showUnique = document.getElementById("ShowUniqueID");
var shU=document.getElementById("showunique");
shU.value=unique;
showUnique.style.display = "block";
newMessageRef.set({
url: downloadURL,
number: unique
});
document.getElementById("upload").innerHTML = "Upload Successful";
// 使文件输入为空
document.getElementById("file").value = "";
}总结
本教程详细讲解了如何构建一个基于 Web 的文件共享应用程序。
参考资料
- Github 源代码仓库
- Firebase Storage 官方文档
- Firebase 通用文档
至此，关于基于 JavaScript 实现文件共享型网站的介绍已完成。如需了解更多 JavaScript 文件共享网站相关内容，请查阅本站往期文章或继续浏览后续文章，感谢支持！