基于JavaScript实现文件共享型网站

 更新时间:2022年11月07日 16:22:38   作者:海拥  
Any Share 是一种简单、轻量、快速的文件共享服务。使用 Javascript 编写,并搭建在 Firebase 平台。本文将利用它实现创建文件共享型网站,感兴趣的可以了解一下

Any Share 是一种简单、轻量、快速的文件共享服务。使用 Javascript 编写,并搭建在 Firebase 平台。

特色

上传文件

下载文件

删除文件

分享文件

查看文件

安全文件共享

说明

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(){
    // 为尚未在数据库字段编号中的每个图像创建一个唯一的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 应用程序。

参考

到此这篇关于基于JavaScript实现文件共享型网站的文章就介绍到这了,更多相关JavaScript文件共享网站内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS实现鼠标按下拖拽效果

    JS实现鼠标按下拖拽效果

    这篇文章主要为大家详细介绍了JS实现鼠标按下拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JS创建对象几种不同方法详解

    JS创建对象几种不同方法详解

    这篇文章主要为大家详细介绍了javascript创建对象的几种不同方法
    2016-03-03
  • ES6 Promise对象的含义和基本用法分析

    ES6 Promise对象的含义和基本用法分析

    这篇文章主要介绍了ES6 Promise对象的含义和基本用法,结合实例形式分析了Promise的含义、功能、基本用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • ES6概念 Symbol.keyFor()方法

    ES6概念 Symbol.keyFor()方法

    这篇文章主要介绍了ES6概念 Symbol.keyFor()方法 ,需要的朋友可以参考下
    2016-12-12
  • underscore之Chaining_动力节点Java学院整理

    underscore之Chaining_动力节点Java学院整理

    本文通过文字说明与代码的形式给大家介绍了underscore之Chaining的相关知识,感兴趣的朋友一起学习吧
    2017-07-07
  • Bootstrap列表组学习使用

    Bootstrap列表组学习使用

    这篇文章主要为大家详细介绍了Bootstrap列表组的学习使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • js 实现碰撞检测的示例

    js 实现碰撞检测的示例

    这篇文章主要介绍了js 实现碰撞检测的示例,帮助大家更好的制作js特效,美化自身网页,感兴趣的朋友可以了解下
    2020-10-10
  • JS版元素周期表实现方法

    JS版元素周期表实现方法

    这篇文章主要介绍了JS版元素周期表实现方法,可实现基于javascript动态生成元素周期表的功能,点击元素项可以在下方显示对应元素的各种常用属性,需要的朋友可以参考下
    2015-08-08
  • JS实现打砖块游戏

    JS实现打砖块游戏

    这篇文章主要为大家详细介绍了JS实现打砖块游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • offsetHeight在OnLoad中获取为0的现象

    offsetHeight在OnLoad中获取为0的现象

    需要获取div的高度时,往往需要用到offsetHeight,有时会碰到offsetHeight获取到为0的现象,感兴趣的朋友可以参考下面的代码片段
    2013-07-07

最新评论