简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Ist es möglich, eine „Galerie' von Bildern dynamisch zu aktualisieren, wenn ein Benutzer ein Bild übermittelt?
P粉715228019
P粉715228019 2024-02-04 11:28:23
0
1
519

Ich erstelle eine Website, um alle Fotos meines Großvaters zu präsentieren. Da ich nicht alle Fotos habe und andere kommen und gehen werden, dachte ich, es wäre schön, eine Website zu haben, auf der sie Fotos einreichen und dann eine „Datenbank“ davon einsehen können.

Derzeit habe ich eine InfinityFree-Website und eine Github-Website. InfinityFree ist sehr gut darin, eine Webplattform mit einem großartigen Editor bereitzustellen, aber ich kann beim besten Willen nicht herausfinden, was auf der Serverseite passiert (d. h. wie Benutzer Dateien einreichen und wie sie sie anzeigen). Beide haben den gleichen Code, aber ich habe versucht, node.js zu verwenden, das auf InfinityFree nicht verfügbar ist. Deshalb habe ich es vorerst belassen und den Code nach Github verschoben.

Ich weiß nicht, wohin ich gehen soll, da keine meiner Suchanfragen sinnvolle Antworten ergeben hat. Sollte ich einen Weg gehen und lernen, wie man die Fotos erhält, speichert und dann auf der Website anzeigt?

Derzeit ist das mein Code. Es ist das Grundgerüst der Website. Jetzt wird nur noch das vom Benutzer ausgewählte Bild angezeigt. 

<!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

Antworte allen(1)
P粉713846879
P粉7138468792024-02-05 09:10:33 1 Etage

这是关于如何上传的指南并在 mongodb 上检索图像

那么你需要一个全栈托管平台我为你推荐Cyclic（用户友好且免费） ）

然后您上传到 MongoDb 的任何图像都会出现在您的网站上 如果您愿意，您也可以将上传表单设为单独的页面，这只是为了向您展示其工作原理

使用 firebase 的另一种方式 这里

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！