搜尋

首頁  >  問答  >  主體

當使用者提交圖像時,是否可以動態更新圖像「圖庫」?

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

目前,我有一個 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粉715228019P粉715228019329 天前606

全部回覆(1)我來回復

  • P粉713846879

    P粉7138468792024-02-05 09:10:33

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

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

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

    使用 firebase 的另一種方式 這裡

    回覆
    0
  • 取消回覆