只使用简单的 JavaScript 创建文件共享型网站

简介: 只使用简单的 JavaScript 创建文件共享型网站

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

特色

  • 上传文件
  • 下载文件
  • 删除文件
  • 分享文件
  • 查看文件
  • 安全文件共享

说明

  • Any Share 使用 Firebase 来存储文件,使用 Firebase 实时数据库来存储文件的元数据。
  • 上传文件时,它会存储在 Firebase 中,并为该文件生成一个唯一 ID,此 ID 用于访问文件。
  • 该文件的元数据存储在 Firebase 实时数据库中。此元数据包括文件的 url 和文件的唯一 ID。
  • 共享文件时,共享文件的唯一 ID。此 ID 用于访问文件。
  • 文件的接收者可以使用文件的唯一 ID 访问文件。
  • 当接收方使用唯一 ID 接收到文件时,文件会从 Firebase 存储中下载并显示给接收方。
  • 接收方收到文件后,会自动从 Firebase 存储中删除该文件。
  • 这样文件就可以安全地共享了。

如何使用

image.png

  • 访问 anyshare
  • 上传一个文件。
  • 等待文件上传。
  • 与接收者共享文件的唯一 ID。
  • 接收方可以使用文件的唯一 ID 访问文件。
  • 接收方收到文件后,会自动从 Firebase 存储中删除该文件。

image.png

代码审查

  • 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 应用程序。

参考



目录
相关文章
|
3月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
25天前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
32 0
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
59 2
前端JS读取文件内容并展示到页面上
|
27天前
|
JavaScript 前端开发 UED
网站内容禁止复制的js代码
【10月更文挑战第2天】
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
17天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
90 0
|
2月前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5
|
2月前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
2月前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
3月前
|
数据采集 存储 JavaScript
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
本文介绍了如何使用Python编写网络爬虫程序爬取书旗网上的小说数据,并通过逆向工程对抗网站的反爬机制,最后对采集的数据进行可视化分析。
174 1
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥