简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Adakah mungkin untuk mengemas kini "galeri" imej secara dinamik apabila pengguna menyerahkan imej?
P粉715228019
P粉715228019 2024-02-04 11:28:23
0
1
537

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粉715228019
P粉715228019

membalas semua(1)
P粉713846879
P粉7138468792024-02-05 09:10:33 Tingkat 1

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

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！