How to Make Bootstrap Modal with File Upload and Preview – jQuery AJAX

Bootstrap Modal is a popup container which use to show various types of information on the screen.

It is very flexible and user-friendly.

You can display a new entry or update form in it.

In this tutorial, I am using Bootstrap Modal for image file upload and display preview using jQuery and AJAX.

How to Make Bootstrap Modal with File Upload and Preview - jQuery AJAX


  1. HTML
  2. PHP
  3. jQuery
  4. Conclusion


Create a button and Bootstrap Modal.

In the Bootstrap Modal create a file element in the <form> and for display image preview after upload created a <div id='preview'>.

Completed Code

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#uploadModal">Upload file</button>

<!-- Modal -->
<div id="uploadModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">File upload form</h4>
      <div class="modal-body">
        <!-- Form -->
        <form method='post' action='' enctype="multipart/form-data">
          Select file : <input type='file' name='file' id='file' class='form-control' ><br>
          <input type='button' class='btn btn-info' value='Upload' id='btn_upload'>

        <!-- Preview-->
        <div id='preview'></div>


2. PHP

Create a ajaxfile.php file and upload folder for storing files.

Define valid image extensions in an $image_ext Array variable.

Select file extension and check it in $image_ext.

If a file has a valid extension then store the selected file to upload folder and return file path.

Completed Code


// file name
$filename = $_FILES['file']['name'];

// Location
$location = 'upload/'.$filename;

// file extension
$file_extension = pathinfo($location, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);

// Valid image extensions
$image_ext = array("jpg","png","jpeg","gif");

$response = 0;
    // Upload file
        $response = $location;

echo $response;

3. jQuery

On the upload button click select the browsed file and create a FormData object for passing file data in AJAX request.

When AJAX request successfully callback then check its response.

If the response is 0 means file is not uploaded otherwise display image preview by creating a <img> element in the <div id='preview'> and use response value to set the image source.

Completed Code


    var fd = new FormData();
    var files = $('#file')[0].files[0];

    // AJAX request
      url: 'ajaxfile.php',
      type: 'post',
      data: fd,
      contentType: false,
      processData: false,
      success: function(response){
        if(response != 0){
          // Show image preview
          $('#preview').append("<img src='"+response+"' width='100' height='100' style='display: inline-block;'>");
          alert('file not uploaded');

4. Conclusion

Within the Bootstrap Modal create your file element in the <form> and use jQuery AJAX for storing file to the server and display preview.

If you found this tutorial helpful then don't forget to share.
Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request.