简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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
518

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
P粉7138468792024-02-05 09:10:33 1 plancher

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

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！