基于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文件共享网站内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript中Microtask和Macrotask鲜为人知的知识点

    Javascript中Microtask和Macrotask鲜为人知的知识点

    这篇文章主要为大家介绍了Javascript中Microtask和Macrotask鲜为人知的知识点讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • JavaScript数组去重的多种方法(四种)

    JavaScript数组去重的多种方法(四种)

    数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。下面脚本之家小编给大家带来了js数组去重的多种方法,非常不错,需要的朋友参考下
    2017-09-09
  • bootstrap实现的自适应页面简单应用示例

    bootstrap实现的自适应页面简单应用示例

    这篇文章主要介绍了bootstrap实现的自适应页面简单应用,结合具体实例形式分析了基于bootstrap的列表布局结构页面实现与使用技巧,需要的朋友可以参考下
    2017-03-03
  • 微信小程序将字符串生成二维码图片的操作方法

    微信小程序将字符串生成二维码图片的操作方法

    这篇文章主要介绍了微信小程序将字符串生成二维码图片的操作方法,需要的朋友可以参考下
    2018-07-07
  • JavaScript如何获取一个元素的样式信息

    JavaScript如何获取一个元素的样式信息

    这篇文章主要介绍了JavaScript如何获取一个元素的样式信息,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JS实现商品倒计时实现代码

    JS实现商品倒计时实现代码

    JS实现商品倒计时实现代码,需要的朋友可以参考一下
    2013-05-05
  • 让IDE识别webpack的别名alias的实现方法

    让IDE识别webpack的别名alias的实现方法

    这篇文章主要介绍了让IDE识别webpack的别名alias的实现方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • javascript观察者模式实现自动刷新效果

    javascript观察者模式实现自动刷新效果

    这篇文章主要为大家详细介绍了javascript观察者模式实现自动刷新效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • webpack3.0升级4.0的方法步骤

    webpack3.0升级4.0的方法步骤

    这篇文章主要介绍了webpack3.0升级4.0的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • js遍历对象key和value实战举例

    js遍历对象key和value实战举例

    这篇文章主要给大家介绍了关于js遍历对象key和value的相关资料,随着JavaScript在web应用程序中的广泛使用,遍历对象的key和value成为了编写复杂代码所必需的技能,需要的朋友可以参考下
    2023-07-07

最新评论