Je crée un site internet pour présenter toutes les photos de mon grand-père. Comme je n'ai pas toutes les photos et qu'il y en aura d'autres qui vont et viennent, j'ai pensé que ce serait bien d'avoir un site Web sur lequel ils pourraient soumettre des photos et ensuite en visualiser une « base de données ».
Actuellement, j'ai un site Web InfinityFree et un site Web github. InfinityFree est très doué pour fournir une plate-forme Web avec un excellent éditeur, mais je n'arrive pas du tout à comprendre ce qui se passe côté serveur (c'est-à-dire comment les utilisateurs soumettent des fichiers et comment ils les visualisent). Les deux ont le même code, mais j'ai essayé d'utiliser node.js qui n'est pas disponible sur InfinityFree, c'est pourquoi je l'ai laissé pour l'instant et j'ai déplacé le code vers github.
Je ne sais pas où aller car aucune des recherches que j'ai effectuées n'a donné de réponses significatives. Dois-je suivre un itinéraire et apprendre comment obtenir puis stocker puis afficher les photos sur le site ?
Actuellement, voici mon code. C'est l'épine dorsale de base du site Web. Il ne fait plus qu'afficher l'image sélectionnée par l'utilisateur.
<!doctype html>
<html>
<head>
<div class="header">
<h1>Welcome!</h1>
<p>Here is a site to view and submit photos of _________</p>
</div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
margin: 0;
}
.header {
padding: 70px;
text-align: center;
background: #663399;
color: white;
position: relative;
top: -35px;
}
.header h1 {
font-size: 65px;
margin-top: 0;
position: relative;
top: 0px;
}
.header p {font-size: 25px;}
.content {padding:20px;}
</style>
</head>
<body>
<script>
function handleImageUpload()
{
var image = document.getElementById("upload").files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("display-image").src = e.target.result;
}
reader.readAsDataURL(image);
}
</script>
<input type="file" onchange="handleImageUpload()" id="upload" multiple />
<img id="display-image" src="#" alt="your image" />
</body>
</html>````
I am just struggling to see how I have not found a useful video, website, or text discussing how to do this.
It seems as though this should be well-documented and/or easy to implement.
Maybe I am just crazy. 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ceci est un guide sur comment télécharger et récupérer des images sur mongodb
Ensuite, vous avez besoin d'une plateforme d'hébergement full-stack et je vous recommande Cyclic (convivial et gratuit) )
Toutes les images que vous téléchargez sur MongoDb apparaîtront alors sur votre site Web Vous pouvez également créer une page distincte pour le formulaire de téléchargement si vous le souhaitez, juste pour vous montrer comment cela fonctionne
Une autre façon d'utiliser Firebase ici