快捷導(dǎo)航

基于JavaScript實(shí)現(xiàn)文件共享型網(wǎng)站

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

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

特色

上傳文件

下載文件

刪除文件

分享文件

查看文件

安全文件共享

說明

Any Share 使用 Firebase 來存儲文件，使用 Firebase 實(shí)時(shí)數(shù)據(jù)庫來存儲文件的元數(shù)據(jù)。

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

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

共享文件時(shí)，共享文件的唯一 ID。此 ID 用于訪問文件。

文件的接收者可以使用文件的唯一 ID 訪問文件。

當(dāng)接收方使用唯一 ID 接收到文件時(shí)，文件會從 Firebase 存儲中下載并顯示給接收方。

接收方收到文件后，會自動從 Firebase 存儲中刪除該文件。

這樣文件就可以安全地共享了。

如何使用

訪問 anyshare。
上傳一個(gè)文件。
等待文件上傳。
與接收者共享文件的唯一 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");
				// 然后從數(shù)據(jù)庫中刪除圖像
				ref.child(childSnapshot.key).remove();
				// 從存儲中刪除文件
				// 延遲5秒運(yùn)行
				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(){
    // 為尚未在數(shù)據(jù)庫字段編號中的每個(gè)圖像創(chuàng)建一個(gè)唯一的5位數(shù)
    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 實(shí)時(shí)數(shù)據(jù)庫中保存文件元數(shù)據(jù)的代碼

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 = "";

    }