cari

Rumah  >  Soal Jawab  >  teks badan

Adakah mungkin untuk mengemas kini "galeri" imej secara dinamik apabila pengguna menyerahkan imej?

Saya sedang mencipta tapak web untuk mempamerkan semua foto datuk saya. Memandangkan saya tidak mempunyai semua foto, dan akan ada orang lain yang datang dan pergi, saya fikir adalah bagus untuk mempunyai tapak web di mana mereka boleh menyerahkan foto dan kemudian melihat "pangkalan data" mereka.

Pada masa ini, saya mempunyai tapak web InfinityFree dan tapak web github. InfinityFree sangat baik dalam menyediakan platform web dengan editor yang hebat, tetapi saya tidak dapat memikirkan perkara sebelah pelayan (iaitu cara pengguna menghantar fail dan cara mereka melihatnya). Kedua-duanya mempunyai kod yang sama, tetapi saya cuba menggunakan node.js yang tidak tersedia di InfinityFree, itulah sebabnya saya meninggalkannya buat masa ini dan mengalihkan kod itu ke github.

Saya tidak tahu hendak pergi ke mana kerana tiada satu pun carian yang saya lakukan telah menghasilkan jawapan yang bermakna. Perlukah saya mengambil laluan dan belajar cara mendapatkan kemudian menyimpan kemudian memaparkan foto di tapak web?

Pada masa ini ini adalah kod saya. Ia adalah tulang belakang asas laman web. Kini semua yang dilakukan ialah memaparkan imej yang dipilih oleh pengguna. 

<!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粉715228019320 hari yang lalu597

membalas semua(1)saya akan balas

  • P粉713846879

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

    Ini adalah panduan tentang cara memuat naik dan mendapatkan semula imej di mongodb

    Maka anda memerlukan platform pengehosan tindanan penuh dan saya mengesyorkan anda Cyclic (mesra pengguna dan percuma) )

    Sebarang imej yang anda muat naik ke MongoDb kemudiannya akan dipaparkan di tapak web anda Anda juga boleh menjadikan borang muat naik sebagai halaman berasingan jika anda mahu, hanya untuk menunjukkan kepada anda cara ia berfungsi

    Cara lain untuk menggunakan firebase di sini

    balas
    0
  • Batalbalas