간단한 JavaScript를 사용하여 파일 공유 웹 사이트를 만든 방법
20339 단어 csswebdevjavascripthtml
친구 및 가족과 안전하게 파일을 공유하기 위해 만든 웹사이트입니다.
이 코드로 나만의 웹사이트를 만들 수 있습니다.
특징
일하고 있는
사용하는 방법
코드 검토
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";
// After 2 sec make it empty
setTimeout(function(){
document.getElementById("upload").innerHTML = uploadtext;
}
, 2000);
}
}
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");
// AFter this delete the image from the database
ref.child(childSnapshot.key).remove();
// Remove file from storage
//Run this with 5sec delay
setTimeout(function(){
var storageRef = firebase.storage().refFromURL(childData.url);
storageRef.delete().then(function() {
ref.child(childSnapshot.key).remove();
// File deleted successfully
}).catch(function(error) {
});
}, 15000);
}
});
}
);
}
function createUniquenumber(){
// Create a unique 5 digit number for each image which is not in the database field number yet
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;
}
function saveMessage(downloadURL) {
var newMessageRef = messagesRef.push();
var unique= createUniquenumber();
// Hidding recive file 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";
//Make file input empty
document.getElementById("file").value = "";
}
결론
참조
Reference
이 문제에 관하여(간단한 JavaScript를 사용하여 파일 공유 웹 사이트를 만든 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/varshithvhegde/how-i-created-a-file-sharing-website-using-simple-javascript-355g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)