选择在文件夹中上传的照片数量，并使用php在文件夹中查看和删除

Hii Everyone,

Here I want to upload maximum of 250 images in single folder.Initially If user selects number of photos like 100.Below should show 100 div image box and If div box 5 click and image upload and after upload it should view image and on image tab delete icon will show and it will delete image from folder.Initially I tried this with simple code like below.

View Page:

<?php if($filecount>0){ ?>
  <div class="photos">
    <div id="images">
        <a href=# data-lightbox="roadtrip">
        <?php 
          $filename = substr($images[0], strrpos($images[0], '/') + 1);   
echo '<a href="'.$images[0].'" target="_blank"><img src="'.$images[0].'" style="width:250px;height:250px" /></a><br/>';
?>
    <a href="#" class="del_photo" style="color:#C20B0B;font-size:20px;" onclick="theFunction('<?php echo $filename; ?>','<?php echo $gallery_type; ?>','<?php echo $folder_name; ?>');"><i class="fa fa-remove"></i></a>

    </div>
</div>


  <?php } else { ?>
 <div id="imgContainer">
  <form enctype="multipart/form-data" action="image_upload_demo_submit.php" method="post" name="image_upload_form" id="image_upload_form">
    <div id="imgArea">
          <img src=""></img>
      <div class="progressBar">
        <div class="bar"></div>
        <div class="percent">0%</div>
      </div>
      <div id="imgChange"><span>Upload Photo</span>
        <input type="file" accept="image/*" name="image_upload_file" id="image_upload_file" onchange="upload_img();">
      </div>

    </div>
  </form>
         </div>
  </a>
    <?php } ?>



function upload_img()
{
         var gallery_type = '<?php echo $gallery_type; ?>';
         var folder_name = '<?php echo $folder_name; ?>';
         $.ajax({
      url: "upload_image_admin.php?folder_name=" +folder_name+ "&id="+gallery_type,
      type: "POST",
      data: new FormData($('#image_upload_form')[0]),
      contentType: false,
      cache: false,
      processData:false,
      success: function(data){
       location.reload();
        },
        error: function(){}           
     }); 
         }

JQUERY file

$(document).on('change', '#image_upload_file', function () {
var progressBar = $('.progressBar'), bar = $('.progressBar .bar'), percent = $('.progressBar .percent');

$('#image_upload_form').ajaxForm({
    beforeSend: function() {
    progressBar.fadeIn();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function(html, statusText, xhr, $form) {   
    obj = $.parseJSON(html);  
    if(obj.status){   
      var percentVal = '100%';
      bar.width(percentVal)
      percent.html(percentVal);
      $("#imgArea>img").prop('src',obj.image_medium);     
    }else{
      alert(obj.error);
    }
    },
  complete: function(xhr) {
    progressBar.fadeOut();      
  } 
}).submit();    

});

Backend (save folder) PHP file

<?php
if(isset($_GET['id']))
{
    $gallery_type = $_GET['id'];
$folder_name = $_GET['folder_name'];
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = "$folder_name/$gallery_type/images/";
}
else
{
$folder_name = $_GET['folder_name'];
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif', 'bmp'); // valid extensions
$path = "$folder_name/images/";
}

if(isset($_FILES['image_upload_file']))
{
 $img = $_FILES['image_upload_file']['name'];
 $tmp = $_FILES['image_upload_file']['tmp_name'];

 $ext = strtolower(pathinfo($img, PATHINFO_EXTENSION));

 $final_image = $img;

 if(in_array($ext, $valid_extensions)) 
 {     
  $path = $path.strtolower($final_image); 

  if(move_uploaded_file($tmp,$path)) 
  {
    echo "Image Uploaded";
  }
 } 
 else 
 {
  echo 'invalid file';
 }
}

?>

If I do like this I cant use single code for all div I should repeat same code for similarly like 250 divs and i want to create same jquery file for 250 divs 250 PHP files is there any easy way to do single code upload and view based on user selection code so that code reusability will work and users folder in correct way.Reduce bandwidth.Please anyone help me to resolve this problem. Below I share screenshot which I tried now.

From above picture you can understand.I can upload image seperately