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>
<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