<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>MyPage</h1>      
 
 <?php
  define('CSV_PATH','/'); // specify CSV file path
$path = "csv";
$files = array_diff(scandir($path), array('..', '.'));
//print_r($files);
foreach($files as $key => $csv_file){
    //$csv_file = "info.CSV"; // Name of your CSV file
    
    echo '<button data-id="'.$key.'" >'.$csv_file.'</button><br>';
    }
 ?>
          
</div>
<div class="row">
  <div class="col-sm-12">
    <p id="result"></p>
  </div>

</div>
<script>
$(document).ready(function(){
    $("button").click(function(){
      var id = $(this).data('id');
      var name = $(this).text();
      var path = "importcsv.php";
      $.ajax({
        type: "POST",
        data: {
          'id': id, 
          'name': name, 
         },
        dataType: "json",
        url: path,
        xhr: function() {
            var xhr = $.ajaxSettings.xhr();
            xhr.upload.onprogress = function(e) {
               var percent = (Math.floor(e.loaded / e.total *100) + '%');
                 $('#result').html('<div class="progress"><div class="progress-bar bg-success" style="width:'+percent+'%">'+percent+'</div></div>');
            };
            return xhr;
        },
        success: function(response) {
            //$(this).append('<p>'+response+'<p>');
        } });
     // alert('clicked: '+id+' name: '+name);
    });
});
</script>
</body>
</html>