简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
當使用者提交圖像時，是否可以動態更新圖像「圖庫」？
P粉715228019
P粉715228019 2024-02-04 11:28:23
0
1
515

我正在創建一個網站，展示我祖父的所有照片。由於我沒有所有照片，而且還會有其他人來來去去，我認為有一個網站讓他們可以提交照片然後查看它們的“資料庫”會很不錯。

目前，我有一個 InfinityFree 網站和一個 github 網站。 InfinityFree 非常擅長提供一個具有優秀編輯器的 Web 平台，但我一生都無法弄清楚伺服器端的事情（即用戶如何提交文件以及如何查看它們）。兩者都有相同的程式碼，但我嘗試使用 InfinityFree 上不可用的 node.js，這就是我暫時離開並將程式碼移至 github 的原因。

我不知道該去哪裡，因為我所做的搜尋都沒有產生有意義的答案。我是否應該採取一條路線來學習如何獲取然後存儲然後在網站上顯示照片？

目前這是我的程式碼。它是網站的基本骨幹。現在它所做的只是顯示用戶選擇的圖像。 

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

全部回覆(1)
P粉713846879
P粉7138468792024-02-05 09:10:33 1樓

這是關於如何上傳的指南並在 mongodb 上檢索圖像

那麼你需要一個全棧託管平台我為你推薦Cyclic（用戶友好且免費） ）

然後您上傳到 MongoDb 的任何圖像都會出現在您的網站上 如果您願意，您也可以將上傳表單設為單獨的頁面，這只是為了向您展示其工作原理

使用 firebase 的另一種方式 這裡

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！