Unggah banyak gambar dalam javascript

Dapatkan semua file gambar menggunakan JavaScript dan ulangi file tersebut dengan pernyataan for…of. Ubah setiap file menjadi URL data dengan memanggil fungsi konstruktor FileReader(). Buat elemen <img> dan gunakan URL data tersebut sebagai nilai src. Terakhir, tambahkan elemen ke DOM

Kita dapat menggunakan langkah yang sama yang telah kita terapkan untuk mempratinjau satu gambar dengan JavaScript sebelum mengunggahnya ke server

Pratinjau Beberapa Gambar Sebelum Mengunggah Menggunakan JavaScript

Untuk menerima file dengan elemen <input>, Anda harus menetapkan type="file" sebagai jenisnya. Ini akan memungkinkan satu file pada satu waktu. Tetapi tujuan kami adalah menerima banyak file

Anda perlu menggunakan atribut

          body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #fdfdfd;
    font-family: 'Open Sans', sans-serif;
}

.container {
    width: 500px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

#select-image {
    display: none;
}

label {
    display: flex;
    align-items: center;
    background: #025bee;
    padding: 18px 30px;
    color: #ffffff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

label svg {
    fill: #ffffff;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.preview_image p {
    text-align: center;
}

#images {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.image_box {
    width: 45%;
}

img {
    width: 100%;
}

.image_name {
    display: block;
    font-size: 14px;
    text-align: center;
}
        

Dengan ini, pengguna dapat memilih jenis file apa pun yang mereka inginkan. Sekarang terserah kita untuk memvalidasi jenis file dalam JavaScript sehingga pengguna hanya memilih gambar

Ada 3 langkah sederhana untuk mempratinjau banyak gambar menggunakan JavaScript

1. Buat tata letak halaman dengan gaya CSS untuk memilih dan menampilkan gambar
2. Ubah semua gambar menjadi URL data menggunakan fungsi konstruktor FileReader()
3. Buat elemen <img> dinamis untuk setiap file dan tambahkan ke DOM

Mari kita lihat setiap langkah secara mendetail dengan contoh

Langkah 1. Buat Tata Letak Halaman Web Dengan HTML dan CSS

Saya membuat struktur HTML dengan elemen <input>. Pengguna dapat memilih file gambar dengan mengklik elemen ini. Saya juga memiliki bagian lain untuk menunjukkan jumlah file yang dipilih dan mempratinjau gambar tersebut

          <div class="container">
    <!-- Input element to choose images -->
    <input type="file" id="select-image" multiple>
    <label for="select-image">
        <?xml version="1.0" ?><svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M1344 1472q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h427q21 56 70.5 92t110.5 36h256q61 0 110.5-36t70.5-92h427q40 0 68 28t28 68zm-325-648q-17 40-59 40h-256v448q0 26-19 45t-45 19h-256q-26 0-45-19t-19-45v-448h-256q-42 0-59-40-17-39 14-69l448-448q18-19 45-19t45 19l448 448q31 30 14 69z" />
        </svg>
        Choose Images
    </label>

    <div class="preview_image">
        <!-- It will show the total number of files selected -->
        <p><span id="total-images">0</span> File(s) Selected</p>

        <!-- All images will display inside this div -->
        <div id="images"></div>
    </div>
</div>
        

Ini tidak akan terlihat bagus di browser. Saya akan menambahkan beberapa gaya CSS ke dalamnya. Anda dapat menggunakan gaya Anda sendiri jika Anda mau. Jika tidak, salin dan tempel kode berikut

Mengunggah gambar adalah fungsi yang sangat umum dalam bahasa pemrograman apa pun. Pada artikel ini, kami akan membagikan kepada Anda cara mempratinjau banyak gambar sebelum mengunggah dalam javascript. terkadang Anda ingin menampilkan pratinjau gambar sebelum diunggah. jadi, kami dapat memeriksa semua gambar dan memeriksa sebelum mengunggah di server. pratinjau gambar sebelum mengunggah keuntungan utamanya adalah jika kami memilih gambar yang salah maka kami mengubahnya dan kemudian setelah mengunggah lagi

Cara mempratinjau banyak gambar sebelum mengunggah fungsi ini sangat mudah diterapkan di semua platform bantuan javascript Anda. di sini Anda dapat melihat bagaimana melakukannya. jadi, Anda dapat menggunakannya di aplikasi web apa pun

Langkah - 1 Buat struktur proyek

Pertama, kami membuat satu struktur proyek sederhana untuk cara mempratinjau banyak gambar sebelum mengunggah fungsionalitas

├── imageupload            # imageupload (this is your project directory)
│   ├── index.php          # index.php (it is your code file)
|   |── custom.js          # custom.js (write here your image uplod code)

Langkah - 2 Tulis kode di index. file php

Setelah selesai buat struktur proyek kemudian cukup buka file index.php Anda dan masukkan kode berikut ke dalamnya

Bagaimana cara mengunggah banyak gambar menggunakan JavaScript?

Bagaimana cara mempratinjau banyak gambar sebelum mengunggah dalam javascript?

Bagaimana Anda menambahkan banyak gambar dalam HTML?

Bagaimana cara mengunggah gambar dalam JavaScript?