Thiết kế website giá rẻ

Question

I need when i drag and drop the images its should display below form dynamically without refreshing the page and also front end and backend validation

view

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop File Upload</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
  h3{
    text-align:center;
  }
  .image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .image-container img {
    width: 100px; 
    height: 100px; 
    margin: 10px;
    padding:5px;
    border:1px solid black;
  }
  .dropzone {
    border: 3px dotted #ccc;
    padding: 20px;
    margin-left: 200px;
    margin-right: 200px;
    text-align: center;
  }

  /* Style the fallback input */
  .fallback {
    display: none; /* Hide the fallback input */
  }

</style>

</head>
<body>
<h3>Upload Images</h3>
<form action="<?php echo base_url('upload/image_upload') ?>" method="post" enctype="multipart/form-data" class="dropzone" id="fileupload">
<div class="fallback">
    <input name="file" type="file" multiple />
  </div>
</form>
<br><br><br><br>
<div class="image-container">
  <?php if (!empty($images)): ?>
    <?php foreach ($images as $image): ?>
      <img src="<?php echo $image['file_path']; ?>" alt="<?php echo $image['file_name']; ?>">
    <?php endforeach; ?>
  <?php endif; ?>
</div>

</body>
</html>

model

    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');

    use MongoDBBSONObjectId;

    class upload_model extends CI_Model {

        protected $collection;

        public function __construct() {
            parent::__construct();
            $this->load->library('mongo_db');
            $this->collection = 'uploads'; 
        }
        
        public function upload_image($data){
            if(isset($data['_id'])) {
                $data['_id'] = new ObjectId($data['_id']);
            }
            $this->mongo_db->insert($this->collection, $data);
        }

        public function get_all_images() {
            return $this->mongo_db->get($this->collection);
        }

    }

controller

    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');

    class upload extends CI_Controller {
        public function __construct() {
            parent::__construct();
            $this->load->library('mongo_db');
            $this->load->model('upload_model');
        }

        public function index() {
            $data['images'] = $this->upload_model->get_all_images();
        
            $this->load->view('drag_drop',$data);
        }

        public function image_upload() {
            if ($_FILES) {
                $config['upload_path'] = './uploads/';
                $config['allowed_types'] = 'jpeg|jpg|png';
                $config['max_size'] = 5120;
            
        
                $this->load->library('upload', $config);
        
                if ($this->upload->do_upload('file')) {
                    $upload_data = $this->upload->data();
                    $product_image = $upload_data['file_name'];
                    $file_path = base_url('uploads/' . $product_image); 
                    $uploaded_time = date('Y-m-d H:i:s'); 
        
                
                    $data = array(
                        'file_name' => $product_image,
                        'file_path' => $file_path,
                        'uploaded_time' => $uploaded_time,
                    );
                    $this->upload_model->upload_image($data);
                    
        
                
                
                }
            }
        }
        
    }

I need when i drag and drop the images its should display below form dynamically without refreshing the page

my database name:file_uploads
I’m using mongodb,codeigniter 3 and dropzone.js library

i need images present in db should display without refreshing the page

Thiết kế website giá rẻ

Danh mục

drag and drop image it should display dynamically without refreshing page using ajax.but its not working for me