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.

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://www.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 :

• Technology
• Google Adsense
• Programming

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.