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

相关文章

  • Web安全之XSS攻击与防御小结

    Web安全之XSS攻击与防御小结

    这篇文章主要介绍了Web安全之XSS攻击与防御小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 微信小程序实现二维码签到考勤系统

    微信小程序实现二维码签到考勤系统

    这篇文章主要介绍了微信小程序实现二维码签到考勤系统,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • 一篇文章弄懂javascript中的执行栈与执行上下文

    一篇文章弄懂javascript中的执行栈与执行上下文

    这篇文章主要给大家介绍了关于javascript中执行栈与执行上下文的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • ES6 Promise对象的含义和基本用法分析

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

    这篇文章主要介绍了ES6 Promise对象的含义和基本用法,结合实例形式分析了Promise的含义、功能、基本用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • csdn 批量接受好友邀请

    csdn 批量接受好友邀请

    说实话,加好友的太多了,怎么办,想个批量的办法吧
    2009-02-02
  • 动态刷新 dorado树的js代码

    动态刷新 dorado树的js代码

    动态刷新 dorado树的js代码
    2009-06-06
  • javascript移动端 电子书 翻页效果实现代码

    javascript移动端 电子书 翻页效果实现代码

    这篇文章主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • javascript 得到文件后缀名的思路及实现

    javascript 得到文件后缀名的思路及实现

    在上传文件时,常常要对文件的类型即对文件的后缀名进行判断,用javascript可以很容易的做到这一点。用Javascript解析一个带绝对路径的文件名并得到后缀名的方法有很多种,这里列出一种,以供参考。
    2013-07-07
  • 一文快速学会创建uni-app项目并了解pages.json文件

    一文快速学会创建uni-app项目并了解pages.json文件

    这篇文章主要给大家介绍了如何创建uni-app项目并了解pages.json文件的相关资料,pages.json文件用来对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等,需要的朋友可以参考下
    2023-10-10
  • three.js开发3d地图的实现示例

    three.js开发3d地图的实现示例

    本文主要介绍了three.js开发3d地图的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论