Bootstrap Modal popup multiple File Upload using AJAX

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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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 :

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   How to Check If String Contains a Substring in PHP
  2.   Top 10 Angular2 Interview Questions and Answers
  3.   Autocomplete with Search box in vuejs Demo
  4.   How to display image from storage path using route in Laravel?
  5.   Multiple file Upload in Laravel 5.7 with validation
  6.   jquery Drag and Drop draggable droppable Example
  7.   Redirect page after delay using Angularjs Example
  8.   Laravel Toggle Switch with Ajax Update Database
  9.   Nested Queries Subqueries in SQL Example
  10.   CKEditor Upload files Custom File Manager using PHP