Skip to main content

Bootstrap Modal popup multiple File Upload using AJAX

Today, We want to share with you Bootstrap Modal popup multiple File Upload using AJAX.In this post we will show you File upload through a modal using Ajax, hear for Modal popup Upload Multiple Images Using PHP and jQuery we will give you demo and example for implement.In this post, we will learn about How to Make Bootstrap Modal with File Upload and Preview – jQuery AJAX with an example.

Bootstrap Modal popup multiple File Upload using AJAX

There are the Following The simple About Bootstrap Modal popup multiple File Upload using AJAX Full Information With Example and source code.

Also Read :  VueJS Show Hide Password in Password TextBox with CheckBox

As I will cover this Post with live Working example to develop Drag & Drop File Upload Dialog with jQuery and Bootstrap, so the bootstrap modal file upload for this example is following below.

File upload through a modal using Ajax

<h1>Modal popup Upload Multiple Images Using PHP and jQuery</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#uploadModal">Upload file</button>

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

    <!-- Pakainfo Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Your File upload form</h4>
      </div>
      <div class="gst modal-body">
        <!-- Pakainfo Form -->
        <form method='post' action='' enctype="multipart/form-data">
          Select Images/file : <input type='file' name='file' id='file' class='pakainfo form-control' ><br>
          <input type='button' class='pakainfo btn btn-primary' value='Upload' id='flupload'>
        </form>

        <!-- Preview-->
        <div id='display_img'></div>
      </div>
	<a href="https://pakainfo.com/" target="_blank" alt="pakainfo" title="pakainfo">Free Download Example - Pakainfo.com</a>
    </div>

  </div>
</div>

PHP(do_upload.php)

<?php

//Get a file name
$liveflname = $_FILES['file']['name'];

// Location
$file_places = 'upload/'.$liveflname;

//Get file extension using PHP
$fl_ext = pathinfo($file_places, PATHINFO_EXTENSION);
$fl_ext = strtolower($fl_ext);

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

$results = 0;
if(in_array($fl_ext,$image_ext)){
  // Upload file
  if(move_uploaded_file($_FILES['file']['tmp_name'],$file_places)){
    $results = $file_places;
  }
}

echo $results;

jQuery

$(document).ready(function(){
  $('#flupload').click(function(){

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

    //jquery AJAX request
    $.ajax({
      url: 'do_upload.php',
      type: 'post',
      data: frmdata,
      contentType: false,
      processData: false,
      success: function(results){
        if(results != 0){
          // Here image display_img
          $('#display_img').append("<img src='"+results+"' width='100' height='100' style='display: inline-block;'>");
        }else{
          alert('file not uploaded');
        }
      }
    });
  });
});

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  jQuery Check duplicated value in array

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Bootstrap Modal popup multiple File Upload using AJAX.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Web Developer

Hi, I’m Web developer, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]