简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Is it possible to dynamically update a "gallery" of images when a user submits an image?
P粉715228019
P粉715228019 2024-02-04 11:28:23
0
1
489

I am creating a website to display all the photos of my grandfather. Since I don't have all the photos, and there will be others coming and going, I thought it would be nice to have a website where they could submit photos and then view a "database" of them.

Currently, I have an InfinityFree website and a github website. InfinityFree is very good at providing a web platform with a great editor, but I can't for the life of me figure out the server-side thing (i.e. how users submit files and how they view them). Both have the same code, but I tried using node.js which is not available on InfinityFree, that's why I left it for now and moved the code to github.

I don't know where to go since none of the searches I've done have yielded meaningful answers. Should I take a route and learn how to get then store then display the photos on the website?

Currently this is my code. It is the basic backbone of the website. Now all it does is display the image selected by the user. 

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

reply all(1)
P粉713846879
P粉7138468792024-02-05 09:10:33 1 floor

This is a guide on how to upload and retrieve images on mongodb

Then you need a full-stack hosting platform and I recommend it to you Cyclic (user-friendly and free) )

Any images you upload to MongoDb will then appear on your website You can also make the upload form a separate page if you want, just to show you how it works

Another way to use firebase Here

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！