EasyUI jQuery fileBox 小部件

EasyUI 是一个完全基于 jQuery 的开源 UI 库，它提供了众多易于使用的 UI 组件，其中包括 fileBox 小部件。此组件可轻松地实现文件上传功能，并且具有自定义样式的能力。

安装

要使用 EasyUI jQuery fileBox 小部件，您需要先下载 EasyUI。您可以通过 EasyUI 官网 或者 GitHub 下载最新版本的 EasyUI。在下载的文件中可以找到所有的组件以及相应的文档。

为了使用 fileBox 小部件，您需要引入以下文件：

<link rel="stylesheet" type="text/css" href="../easyui/themes/easyui.css">
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>

同时，也需要引入语言文件（如果需要多语言支持）

<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>

示例代码

为了更好地介绍 fileBox 小部件，我们可以使用一个示例代码。以下代码演示了如何使用 fileBox 实现上传功能，并显示上传的进度条。

<form id="myform" method="POST" enctype="multipart/form-data">
    <div id="fb" class="easyui-filebox" data-options="
        buttonText:'Select File',
        prompt:'Choose a file...',
        accept:['.pdf', '.doc', '.docx', '.xls', '.xlsx'], // 只接受指定的文件类型
        onChange: function(newValue, oldValue) { // 选择文件后触发的事件
            $('#myform').submit(); // 当选择文件后，自动提交表单
        }
    "></div>
</form>

<script type="text/javascript">
$('#myform').form({
    url: 'upload.php',
    onSubmit: function() {
        $.messager.progress({
            title: 'Uploading',
            msg: 'Please wait...'
        });
    },
    success: function(result) {
        $.messager.progress('close');
        $.messager.alert('Info', result, 'info');
    }
});
</script>

参数说明

基本参数

• buttonText：文件选择框的按钮文本
• prompt：选择文件时，显示的提示信息
• readonly：是否只读
• required：是否必须填写
• disabled：是否禁用
• width：控件的宽度
• height：控件的高度
• mimeTypes：可上传的 MIME 类型
• extensions：可上传的文件扩展名
• accept：可上传的文件类型数组（与 extensions 参数互斥）
• multiple：是否允许上传多个文件
• limitSize：上传文件的大小限制
• uploader：上传文件的 URL 地址
• name：请求参数的名称

事件

• onChange：当文件选择框的值发生变化时触发事件
• onSelect：当选择文件时触发事件
• onRemove：当取消选择文件时触发事件
• onUpload：当上传文件时触发事件
• onSuccess：当上传文件成功时触发事件
• onError：当上传文件出错时触发事件
• onComplete：当上传文件完成时触发事件
• onCancel：当取消上传文件时触发事件

总结

EasyUI jQuery fileBox 小部件是一个非常实用且易于使用的组件，它能够轻松实现文件上传功能。同时也具备自定义样式的能力，您可以根据自己的需求自由地改变样式。希望这份介绍能够帮助您更好地使用 fileBox，同时也为您的项目带来更好的用户体验。