基于JavaScript實現文件共享型網站

更新時間：2022年11月07日 16:22:38 作者：海擁

Any?Share?是一種簡單、輕量、快速的文件共享服務。使用?Javascript?編寫，并搭建在?Firebase?平臺。本文將利用它實現創(chuàng)建文件共享型網站，感興趣的可以了解一下

特色

上傳文件

下載文件

刪除文件

分享文件

查看文件

安全文件共享

說明

Any Share 使用 Firebase 來存儲文件，使用 Firebase 實時數據庫來存儲文件的元數據。

上傳文件時，它會存儲在 Firebase 中，并為該文件生成一個唯一 ID，此 ID 用于訪問文件。

該文件的元數據存儲在 Firebase 實時數據庫中。此元數據包括文件的 url 和文件的唯一 ID。

共享文件時，共享文件的唯一 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(){
    // 為尚未在數據庫字段編號中的每個圖像創(chuàng)建一個唯一的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 = "";

    }