EasyUI jQuery fileBbox插件

EasyUI jQuery fileBbox插件是一个可以在网页中实现文件上传功能的小部件，是基于jQuery EasyUI的文件上传插件，可以轻松的集成到任何网站上，实现文件上传等功能。

特点

• 支持多文件上传
• 支持Ajax异步上传
• 支持拖放文件上传
• 支持上传前验证和上传后事件
• 支持显示上传进度
• 具有友好的用户界面和良好的用户体验
• 可以自定义风格和配置选项

用法

1. 引入EasyUI和fileBbox依赖：

   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/jquery-easyui@1.10.6/themes/bootstrap/easyui.css">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/jquery-easyui@1.10.6/themes/icon.css">
   <script src="//cdn.jsdelivr.net/npm/jquery-easyui@1.10.6/jquery.easyui.min.js"></script>
   <script src="/path/to/jquery.fileBbox.js"></script>
   

2. 在HTML中增加一个fileBbox部件：

   <div id="fileInput"></div>
   

3. 在JavaScript中使用fileBbox部件：

   $('#fileInput').fileBbox({
       url: '/path/to/upload',
       multiple: true,
       onSelect: function(files){
           console.log(files);
       },
       onProgress: function(file, loaded, total){
           console.log(file, loaded, total);
       },
       onComplete: function(response){
           console.log(response);
       }
   });
   

配置选项

| 属性 | 类型 | 默认值 | 描述 | | --------- | ------------ | ------------ | ------------------------------------------------------------ | | url | string | undefined | 文件上传的URL地址 | | method | string | post | 提交类型，post或get | | multiple | boolean | false | 是否开启多文件上传，默认为否 | | accept | string | undefined | 允许上传的文件类型，例如：image/* | | sizeLimit | number | undefined | 上传文件大小的限制，单位为KB，默认无限制 | | onSelect | function | undefined | 选择文件后的回调函数，参数为选择的文件数组 | | onProgress| function | undefined | 上传进度改变时的回调函数，参数为当前上传的文件对象、已上传的字节数和总字节数 | | onComplete| function | undefined | 上传完成后的回调函数，参数为服务器返回的响应数据 | | onBeforeUpload| function | undefined | 上传前的回调函数，返回false即可取消上传 | | onError | function | undefined | 上传出错时的回调函数，参数为错误信息 |

示例

$('#fileInput').fileBbox({
    url: '/path/to/upload',
    method: 'post',
    multiple: true,
    accept: 'image/*',
    sizeLimit: 1024, //KB
    onSelect: function(files){
        console.log(files);
    },
    onProgress: function(file, loaded, total){
        console.log(`File ${file.name} Progress: ${loaded}/${total}`);
    },
    onComplete: function(response){
        console.log(response);
    },
    onBeforeUpload: function(file){
        if(file.name.indexOf('demo') === 0){
            alert('禁止上传以demo开头的文件');
            return false;
        }
    },
    onError: function(error){
        console.error(error);
    }
});

结语

EasyUI jQuery fileBbox插件是一个非常实用的小部件，可以在网页中方便地实现文件上传功能，具有丰富的配置选项和友好的用户界面。如果您在使用过程中遇到问题，欢迎在GitHub提交issues。