How to design file upload feature for forms using jQuery EasyUI?

Last Updated : 30 Dec, 2020

EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Download all the required pre-compiled files from the official website and save it in your working folder. Please take care of file paths during code implementation.

Downloads for EasyUI for jQuery :

https://www.jeasyui.com/index.php

Example 1: The following example demonstrates the basic filebox feature to include in the developer's webpage forms using the jQuery EasyUI plugin.

HTML

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" 
      content="initial-scale=1.0, 
      maximum-scale=1.0, user-scalable=no">
   
     <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
      href="themes/metro/easyui.css">       
    <link rel="stylesheet" type="text/css" 
      href="demo.css">  
    <link rel="stylesheet" type="text/css" 
    href="themes/icon.css">  
    <!--jQuery library -->
    <script type="text/javascript" 
      src="jquery.min.js">
    </script>
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
     src="jquery.easyui.min.js">
    </script>    
    
</head>
<body>
     <h2>jQuery EasyUI basic filebox feature</h2>
    
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" title="Upload File" 
        style="width:100%;max-width:400px;padding:30px 60px;">
        
        <div style="margin-bottom:20px"> 
            <!--easyui-filebox class is used -->
            <input class="easyui-filebox" label="File1:" labelPosition="top" 
                 data-options="prompt:'Choose a file...'" style="width:100%">
        </div>
        <div style="margin-bottom:40px">
            <input class="easyui-filebox" label="File2:" labelPosition="top" 
             data-options="prompt:'Choose 2nd file...'" style="width:100%">
        </div>
        <div>
           <!--link can be created with easyui-linkbutton class -->
            <a href="#" class="easyui-linkbutton" style="width:100%">
            Upload file
            </a>
        </div>
    </div>
</body>    
</html>

Output:

Basic filebox screen:

After select file:

Example 2:

The following example demonstrates how to align the filebox button on the left or right sides according to the user's need. It also demonstrates to set the width of filebox to a percentage with respect to its parent container.

HTML

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">  
    <meta name="viewport" 
      content="initial-scale=1.0, 
      maximum-scale=1.0, user-scalable=no">
   
     <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
      href="themes/metro/easyui.css">       
    <link rel="stylesheet" type="text/css" 
      href="demo.css">  
    <link rel="stylesheet" type="text/css" 
    href="themes/icon.css">  
    <!--jQuery library -->
    <script type="text/javascript" 
      src="jquery.min.js">
    </script>
    <!--jQuery libraries of EasyUI  -->
    <script type="text/javascript" 
     src="jquery.easyui.min.js">
    </script>    
    
</head>
<body>
     <h2>jQuery EasyUI basic filebox feature</h2>
    
    
<p>Change the 'choose file' alignment to the left or right.</p>

    
    <span>Select alignment:</span>
    <select onchange="selectAlign(this.value)">
        <option value="left" selected>Left</option>
        <option value="right">Right</option>
    </select>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
        <!--set the width of FileBox with respect to its parent container -->
        <div style="margin-bottom:20px">
            <input class="easyui-filebox" labelPosition="top" 
            style="width:100%" data-options="prompt:'Choose file1...'">
        </div>
        
        <div style="margin-bottom:20px">
            <input class="easyui-filebox" labelPosition="top" 
            style="width:80%" data-options="prompt:'Choose file2...'">
        </div>
    </div>
        
    <script type="text/javascript">
      <!-- function to change right or left alignment  -->
        function selectAlign(align)
        {
            $('.easyui-filebox').filebox({buttonAlign:align});
        }
    </script>
</body>    
</html>