Unggah banyak gambar php mysql

Question

Ketika Banyak Gambar diunggah ke dalam folder maka setelah kita harus memasukkan detail gambar yang diunggah seperti nama gambar dan deskripsi di tabel. Jadi setiap data gambar yang diunggah akan dimasukkan ke dalam tabel Mysql. Setelah mengunggah gambar yang kami miliki dengan menggunakan fungsi Ajax, ambil detail gambar dari tabel Mysql dan tampilkan di halaman web dalam format tabel dengan tombol edit dan hapus

Table of Contents Show

Membuat tabel basis data
Buat formulir pengunggahan gambar/file
File koneksi basis data
Gambar mengunggah file skrip logika
Menampilkan Gambar dari Database
Kode Lengkap untuk Cara Mengunggah Banyak Gambar
Bagaimana cara mengunggah dan menampilkan banyak gambar dalam PHP?
Bagaimana cara mengunggah banyak file di MySQL menggunakan PHP?
Bagaimana cara menyimpan banyak gambar di database MySQL?
Bagaimana cara menampilkan banyak gambar di PHP?

Ini semua pengunggahan beberapa gambar dan setelah itu memasukkan data gambar yang diunggah ke dalam tabel MySQL proses telah dilakukan tanpa penyegaran halaman web karena kita harus menggunakan Ajax untuk hal ini dengan PHP dan Mysql

Mengunggah gambar atau file adalah fungsi yang banyak digunakan dalam aplikasi web. Biasanya, kami mengupload satu gambar atau file seperti gambar profil, file pdf, atau apa pun. Dalam tutorial ini, Anda akan mempelajari Cara Mengunggah Banyak Gambar di PHP langkah demi langkah. Periksa demo kami

Tetapi ketika harus mengunggah banyak gambar atau file, kita perlu memikirkan beberapa logika dan memproses bagaimana melakukannya. Namun terkadang Anda memiliki persyaratan untuk mengupload beberapa gambar sekaligus

Umumnya pada aplikasi web, file/gambar diunggah ke folder server dan nama file disimpan di database. Kemudian file diambil dari folder berdasarkan nama file yang disimpan di database.

Dalam tutorial ini, kami akan mengimplementasikan semua proses ini, selangkah demi selangkah

Membuat tabel basis data
Buat formulir pengunggahan gambar/file
File koneksi basis data
Gambar mengunggah file skrip logika
Menampilkan Gambar dari Database
Kode Lengkap

Membuat tabel basis data

Pertama kita perlu membuat tabel database untuk menyimpan nama-nama gambar yang akan kita upload. Seperti yang kita ketahui sebelumnya, Gambar disimpan di folder server dan namanya disimpan ke tabel database

Buat dua kolom bernama ID dan imgName dengan ID untuk ditambahkan secara otomatis. Saya harap Anda tahu cara membuat tabel di database

Buat formulir pengunggahan gambar/file

  <form action="upload-script.php" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                   <div class="form-group">
                       <input type="file" name="imageFile[]" required multiple class="form-control">
                   </div>
               </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <input type="submit" name="uploadImageBtn" id="uploadImageBtn" value="Upload Images" class="btn btn-success">
                    </div>
                </div>
            </div>
        </div>
    </form>

If you see in this

tag, I used the action to upload-script.php. This is the logic file to upload multiple images. And name=”imageFile[]”, there are square braces that indicate an array of images.

File koneksi basis data

<?php
$hostName = "localhost"; // host name
$username = "root";  // database username
$password = ""; // database password
$databaseName = "codingbirds"; // database name

$connection = new mysqli($hostName,$username,$password,$databaseName);
if (!$connection) {
    die("Error in database connection". $connection->connect_error);
}
?>

_

Ini adalah file koneksi ke database. Ada nama host, nama pengguna, kata sandi dan nama database. Anda dapat mengubah sesuai

Gambar mengunggah file skrip logika

unggah-skrip. php

<?php
include "config.php";
if (isset($_POST['uploadImageBtn'])) {
    $uploadFolder = 'uploads/';
    foreach ($_FILES['imageFile']['tmp_name'] as $key => $image) {
        $imageTmpName = $_FILES['imageFile']['tmp_name'][$key];
        $imageName = $_FILES['imageFile']['name'][$key];
        $result = move_uploaded_file($imageTmpName,$uploadFolder.$imageName);

        // save to database
        $query = "INSERT INTO bird_multiple_images SET imgName='$imageName' " ;
        $run = $connection->query($query) or die("Error in saving image".$connection->error);
    }
    if ($result) {
        echo '<script>alert("Images uploaded successfully !")</script>';
        echo '<script>window.location.href="index.php";</script>';
    }
}

Kode ini memiliki foreach loop untuk mengunggah banyak gambar dan mengunggahnya ke folder bernama "unggah". Dan terakhir menyimpan nama gambar ke database

Menampilkan Gambar dari Database

Ini adalah kode untuk mengambil gambar dari database dan menampilkannya dalam format baris-kolom

 <?php
// fetch Images
$i = 1;
include "config.php";
$queryGetImg = "SELECT * FROM bird_multiple_images";
$resultImg = $connection->query($queryGetImg);
if ($resultImg->num_rows > 0 ){
  while ($row = $resultImg->fetch_object()){ ?>
     <div class="col-sm-3">
	<h3>Image <?php echo $i;?></h3>
	<img src="<?php echo 'uploads/'.$row->imgName;?>"/>
    </div>
    <?php $i++;
   }
}
?>

Kode Lengkap untuk Cara Mengunggah Banyak Gambar

Berikut adalah kode lengkap yang mencakup semua langkah yang disebutkan di atas. Saya pisahkan kodenya agar anda bisa mengerti dengan baik. Sekarang berikut adalah kode lengkap untuk Anda

indeks. php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Upload Multiple Images with PHP</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
</head>
<body>
<div class="jumbotron text-center">
    <h1>Upload Multiple Images with PHP</h1>
    <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
    <form action="upload-script.php" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                   <div class="form-group">
                       <input type="file" name="imageFile[]" required multiple class="form-control">
                   </div>
               </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <input type="submit" name="uploadImageBtn" id="uploadImageBtn" value="Upload Images" class="btn btn-success">
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="row">
        <?php
        // fetch Images
        $i = 1;
        include "config.php";
        $queryGetImg = "SELECT * FROM bird_multiple_images";
        $resultImg = $connection->query($queryGetImg);
        if ($resultImg->num_rows > 0 ){
            while ($row = $resultImg->fetch_object()){ ?>
                <div class="col-sm-3">
                    <h3>Image <?php echo $i;?></h3>
                    <img src="<?php echo 'uploads/'.$row->imgName;?>"/>
                </div>
           <?php $i++;
            }
        }
        ?>
    </div>
</div>
</body>
</html>

_

Jika Anda menghadapi kesalahan dalam pengkodean, maka Anda dapat berkomentar dan saya pasti akan membantu. Dan Anda dapat mengunduh kode sumber dari sini

Anda juga dapat menonton videonya di saluran YouTube saya yang bernama KanpurWebD dan pastikan Anda berlangganan juga