快捷導(dǎo)航

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

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

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

特色

上傳文件

下載文件

刪除文件

分享文件

查看文件

安全文件共享

說(shuō)明

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

上傳文件時(shí)，它會(huì)存儲(chǔ)在 Firebase 中，并為該文件生成一個(gè)唯一 ID，此 ID 用于訪(fǎng)問(wèn)文件。

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

共享文件時(shí)，共享文件的唯一 ID。此 ID 用于訪(fǎng)問(wèn)文件。

文件的接收者可以使用文件的唯一 ID 訪(fǎng)問(wèn)文件。

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

接收方收到文件后，會(huì)自動(dòng)從 Firebase 存儲(chǔ)中刪除該文件。

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

如何使用

訪(fǎng)問(wèn) anyshare。
上傳一個(gè)文件。
等待文件上傳。
與接收者共享文件的唯一 ID。
接收方可以使用文件的唯一 ID 訪(fǎng)問(wèn)文件。
接收方收到文件后，會(huì)自動(dòng)從 Firebase 存儲(chǔ)中刪除該文件。

代碼審查

Firebase 存儲(chǔ)上傳代碼

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 存儲(chǔ)下載代碼

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ù)庫(kù)中刪除圖像
				ref.child(childSnapshot.key).remove();
				// 從存儲(chǔ)中刪除文件
				// 延遲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ù)庫(kù)字段編號(hào)中的每個(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ù)庫(kù)中保存文件元數(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 = "";

    }

總結(jié)

在本教程中，我們解釋了如何創(chuàng)建一個(gè)文件共享型的 Web 應(yīng)用程序。

到此這篇關(guān)于基于JavaScript實(shí)現(xiàn)文件共享型網(wǎng)站的文章就介紹到這了,更多相關(guān)JavaScript文件共享網(wǎng)站內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: