jQuery | Filer Plugin

jQuery provides a quick jQuery Filer uploader plugin for easy implementation of uploading the files. It provides features like instant uploading of files, file append, file removal, multiple selections, drag and drop support along with other file validations.

Please download the required files to include it in your working folder and include in the head section as shown in the following examples. The programmer can adjust all the file paths in his code as organized in the working folder.
Note: HTML input control ids are given as “filer_input” and “filer_input2” to match with plugin’s custom.js code.

Example 1: In the following example, basic file upload implementation is shown using jQuery.Filer plugin. Programmers can try out other features according to the project requirements.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE>
<html lang="html">
  
<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />
    <title>jQuery Filer Plugin</title>
  
    <!-- Google Fonts -->
    <link href=
        rel="stylesheet">
  
    <!-- Styles -->
    <link href="jquery.filer.css" rel="stylesheet">
  
    <!-- Jvascript -->
            crossorigin="anonymous">
    </script>
      
    <script src="jquery.filer.min.js" 
            type="text/javascript">
    </script>
    <script src="custom.js" type="text/javascript"></script>
  
    <style>
        body {
            font-family: sans-serif;
            font-size: 14px;
            line-height: 1.5;
            color: #47505d;
            background-color: #ffffff;
            margin: 0;
            padding: 18px;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksForGeeks</h1>
    <b>jQuery Filer Plugin</b>
    <p></p>
  
    <div id="content">
  
        <!-- File upload form -->
        <form action="upload_form.php" method="post"
                enctype="multipart/form-data">
  
            <input type="file" name="files[]" 
                id="filer_input" multiple="multiple">
                  
            <input type="submit" value="Submit">
        </form>
        <!-- end of File upload-->
  
    </div>
</body>
  
</html>

chevron_right


jQuery code used in the above example: The below code custom.js file is provided by jQuery.Filer plugin.

filter_none

edit
close

play_arrow

link
brightness_4
code

$(document).ready(function() {
  
    $('#filer_input').filer({
        showThumbs: true,
        addMore: true,
        allowDuplicates: false
    });
});

chevron_right


Output:



Note: The uploaded file can be seen in the “uploads” folder according to the upload file path given by the programmer.

Example 2: In the following example, drag and drop feature is shown. Files selected are previewed in the bottom with success status.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE>
<html lang="html">
  
<head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />
  
    <title>jQuery Filer DragnDrop Images</title>
  
    <!-- Google Fonts -->
    <link href=
        rel="stylesheet">
  
    <!-- Styles -->
    <link href="jquery.filer.css" rel="stylesheet">
    <link href="jquery.filer-dragdropbox-theme.css"
            rel="stylesheet">
  
    <!-- Jvascript -->
        crossorigin="anonymous">
    </script>
      
    <script src="jquery.filer.min.js"
        type="text/javascript">
    </script>
      
    <script src="custom.js" type="text/javascript"></script>
  
    <style>
        body {
            margin: 0;
            text-align: center;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 1.5;
            color: #47505d;
            padding: 18px;
            background-color: #ffffff;
            margin: 0;
        }
  
        .jFiler {
            font-family: inherit;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksForGeeks</h1>
    <b>jQuery Filer Plugin</b>
    <p></p>
  
    <div id="content">
  
        <!-- For drag and drop of images -->
        <input type="file" name="files[]" 
            id="filer_input2" multiple="multiple">
        <!-- end of drag and drop of images  -->
  
    </div>
</body>
  
</html>

chevron_right


jQuery code used in the above example: The custom.js file is provided by the jQuery.Filer plugin.
Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.