Press "Enter" to skip to content

Multiple File Upload Using Bootstrap 4 and jQuery | SWALLOW

Swallow is a simplified file upload extension “jQuery” and “Bootstrap 4″. This elegant file uploader provides an easy and convenient way to upload local files to your server using the jQuery framework, PHP, and Bootstrap.

This uses the “FormData” constructor for JavaScript in order to ensure management ranging from one to multiple files in addition to the functions available to you. The preview step also allows you to control or delete one or more files.

How to make use of it:

1. Load the newest jQuery library and Bootstrap framework within the doc.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. Load the swallow.js script after jQuery.

<script src="js/swallow.js"></script>

3. Create a container to hold the file uploader.

<div id="example"></div>

4. Initialize the plugin to create a default file uploader on the web page.

$(function() {
  $("#example").swallow({
    // Options here
  })
})  

5. Determine the path to the picture & PHP folders.

$(function() {
  $("#example").swallow({
    // Options here
  })
})  

6. Change the default uploads folder:

$(function() {
  $("#example").swallow({
    targetPath: "nest/"
  })
})  

Multi-file Uploader With jQuery, Bootstrap And PHP, SWALLOW File Upload Plugin/Github

Multiple-File-Upload-SWALLOW-Demo


See Demo And Download

Official Website(GCO44): Click Here

This superior jQuery/javascript plugin is developed by GCO44. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.