只使用简单的 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 应用程序。

参考



目录
相关文章
|
5天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
11 0
|
18天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
18 0
|
1月前
|
数据采集 存储 JavaScript
赋能数据收集:从机票网站提取特价优惠的JavaScript技巧
使用JavaScript和爬虫代理IP,旅游行业可高效抓取机票特价信息。通过模拟不同地区用户,提升数据收集成功率,全面了解市场动态。数据存储到数据库后进行统计分析,助力企业把握用户需求和市场趋势优化决策。
赋能数据收集:从机票网站提取特价优惠的JavaScript技巧
|
1月前
|
JavaScript
uni-app中关于格式化时间的js文件
uni-app中关于格式化时间的js文件
32 0
|
2月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
|
3月前
|
XML JSON JavaScript
|
3月前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
107 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
4月前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
94 0
|
4月前
|
JSON JavaScript 数据格式
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
NPM 发包 js 文件并支持 ts 使用(包含 gulp 打包压缩)
61 0
|
4月前
|
JavaScript 测试技术
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发
【sgGoogleTranslate】自定义组件:基于Vue.js用谷歌Google Translate翻译插件实现网站多国语言开发