无法显示文档文件

This is a small piece of my code where I am trying to upload all sorts of documents (word+images). But it seems only images are getting uploaded well. Rest word files, excel files etc are not getting displayed. What changes are required to make them properly visible?(Please have a look at my screenshot)screenshot of my output.Note: In the screenshot, the third file is not visible

Code:

         <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.2.0/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
         <link rel="stylesheet" href="<?php echo base_url("css/bootstrap.css"); ?>">
        </head>
        <body>
         <div class="container">

          <p><?php echo $this->session->flashdata('statusMsg'); ?></p>
                <form enctype="multipart/form-data" action="" method="post">
                    <div class="form-group">
                        <label>Choose Files</label>

                    <input type="file" class="form-control" name="userFiles[]" multiple/>
                    <button type="submit" class="btn-success form-control" name="fileSubmit" value="UPLOAD" width="100px">UPLOAD</button>
                    </div>
                    </form>



             <div class="row">


                  <div class="thumbnail">
            <?php $thumbnails = array_chunk( $files, 3 );
            ?>
                   <?php if(!empty($files)) { 
                        foreach($thumbnails as $files) { ?>
                        <div class="row">
                        <?php foreach($files as $file) { ?>
                            <div class="col-md-4">
                                <div class="thumbnail">
                                    <img src="<?php echo base_url('uploads/files/'.$file['file_name']); ?>" alt="" >
                                    <p>Uploaded On <?php echo date("j M Y",strtotime($file['created'])); ?></p>
                                </div>
                            </div>
                        <?php } ?>
                    </div>
                <?php } ?>
            <?php } else { ?>
                <p>Image(s) not found.....</p>
            <?php } ?>

                          </div>
                </div></div></div>
</body>
</html>

You should add a picture and assign it as a $var to the file extension

example

<?php 
$notfound_image = "notfound.png"; //your not file found image
$excel_image = "excel.png"; //your excel image icon
$excel_file = "ok.xls";  //your excel file name

//get file extension 
$parts=pathinfo($excel_file);
//echo $parts['extension']; //Returns "xls"
$excel_extension = $parts['extension'];

//check with if 
//compare file extension 

if ($excel_extension == "xls"){
echo '<img src="'.$excel_image.'" />';
} else {
echo '<img src="'.$notfound_image.'" />';
}

?>

Than by this code example I created you can do the same with other files extensions and check with if conditions

Let's see if this works for you

 <?php $thumbnails = array_chunk( $files, 3 );
            ?>
                   <?php if(!empty($files)) { 
                        foreach($thumbnails as $files) { ?>
                        <div class="row">
                        <?php foreach($files as $file) {
$filename = $file['file_name']; ?>
                            <div class="col-md-4">
                                <div class="thumbnail">
                                <?php 

        $parts=pathinfo($filename); 
        $extension = $parts['extension'];       

                                switch ($extension) {
  case 'xls':
  echo '<a href="'.base_url('uploads/files/'.$file['file_name']).'"> 
  <img src="path_to_excel_icon.png" alt="" >
  <p>Uploaded On '.date("j M Y",strtotime($file['created'])).'</p>';
  break;

  case 'docx':
  echo '<a href="'.base_url('uploads/files/'.$file['file_name']).'"> 
  <img src="path_to_word_icon.png" alt="" >
  <p>Uploaded On '.date("j M Y",strtotime($file['created'])).'</p>';
  break;

  case 'jpg':
  echo '<a href="'.base_url('uploads/files/'.$file['file_name']).'"> 
  <img src="<?php echo base_url('uploads/files/'.$file['file_name']); >
  <p>Uploaded On '.date("j M Y",strtotime($file['created'])).'</p>';
  break;
  case 'png':
  echo '<a href="'.base_url('uploads/files/'.$file['file_name']).'"> 
  <img src="<?php echo base_url('uploads/files/'.$file['file_name']); >
  <p>Uploaded On '.date("j M Y",strtotime($file['created'])).'</p>';
  break;

  default:
  echo '<a href="'.base_url('uploads/files/'.$file['file_name']).'"> 
  <img src="path_to_not_found_icon.png" alt="" >
  <p>Uploaded On '.date("j M Y",strtotime($file['created'])).'</p>';

}

?>

                                </div>
                            </div>
                        <?php } ?>
                    </div>
                <?php } ?>
            <?php } else { ?>
                <p>Image(s) not found.....</p>
            <?php } ?>