Est-il possible de mettre à jour dynamiquement une « galerie » d'images lorsqu'un utilisateur soumet une image ?
P粉715228019
P粉715228019 2024-02-04 11:28:23
0
1
594

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.

P粉715228019
P粉715228019

répondre à tous(1)
P粉713846879

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal