Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

EasyUI jQuery fileBbox widget

  • Last Updated : 31 Mar, 2021

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.

In this article, we will learn how to design a FileBox using jQuery EasyUI. The FileBox widget represents a file field in an HTML form.

Downloads for EasyUI for jQuery:

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

Syntax:

<input class="easyui-FileBox">

Properties:

  • buttonText: It is a string that defines the text of the button.
  • buttonIcon: It is a string that defines the icon of the button.
  • buttonAlign: It is a string that defines the position of the button.
  • accept: It is a string that specifies the types of files that the server accepts.
  • multiple: It is a boolean value that defines whether to accept multiple files.
  • separator: It defines the separator char between multiple file names.

Methods:

  • files: It returns the selected file list object.

CDN Link: First, add jQuery Easy UI scripts needed for your project.

<script type=”text/javascript” src=”jquery.min.js”></script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”> </script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”>  </script>

Example:

HTML




<html>
<head>
    
  <!-- EasyUI specific stylesheets -->
  <link rel="stylesheet"
        type="text/css"
        href="themes/metro/easyui.css">
  
  <link rel="stylesheet" 
        type="text/css"
        href="themes/mobile.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>
  
  <!-- jQuery library of EasyUI Mobile -->
  <script type="text/javascript"
          src="jquery.easyui.mobile.js">
  </script>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <h3>EasyUI jQuery filebox widget</h3>
  
  <!-- Define the EasyUI FileBox using markup -->
  <input id="gfg" class="easyui-filebox">
</body>
</html>

Output:

Reference: https://www.jeasyui.com/documentation/filebox.php


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!