后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何使用简单的 JavaScript 创建文件共享网站
Any Share 是一款简单、轻量且快速的文件共享服务。它使用 JavaScript 编写，并使用Firebase平台。这是
我创建的网站，用于与亲朋好友安全共享文件。
您可以使用此代码创建自己的网站。
特征
- 上传文件
- 下载文件
- 删除文件
- 共享文件
- 查看文件
- 安全文件共享
在职的
- Any Share 使用 Firebase 存储文件。它使用 Firebase Storage 存储文件，并使用 Firebase Realtime Database 存储文件元数据。
- 文件上传后，会存储在 Firebase 存储中，并会为该文件生成一个唯一 ID。此 ID 用于访问该文件。
- 该文件的元数据存储在 Firebase 实时数据库中。这些元数据包含文件的 URL 和文件的唯一 ID。
- 当文件共享时，会共享该文件的唯一ID，该ID用于访问该文件。
- 文件的接收者可以使用文件的唯一 ID 访问该文件。
- 当接收方使用唯一 ID 接收到文件时，将从 Firebase 存储下载该文件并显示给接收方。
- 一旦接收方收到文件，该文件就会自动从 Firebase 存储中删除。
- 这样文件就可以安全地共享。
如何使用
- 访问任何共享。
- 上传文件。
- 等待文件上传。
- 与接收者共享文件的唯一 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";
// After 2 sec make it empty
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");
// AFter this delete the image from the database
ref.child(childSnapshot.key).remove();
// Remove file from storage
//Run this with 5sec delay
setTimeout(function(){
var storageRef = firebase.storage().refFromURL(childData.url);
storageRef.delete().then(function() {
ref.child(childSnapshot.key).remove();
// File deleted successfully
}).catch(function(error) {
});
}, 15000);
}
});
}
);
}
- 生成的唯一 ID
function createUniquenumber(){
// Create a unique 5 digit number for each image which is not in the database field number yet
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();
// Hidding recive file 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";
//Make file input empty
document.getElementById("file").value = "";
}
结论
- 在本教程中，我解释了如何创建自己的文件共享 Web 应用程序。