🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## addFile('name值', '标题' [, '提示', '默认值', '限制大小', '文件后缀', '额外css类']) | 版本 | 新增功能 | | --- | --- | | 1.0.5 | 自定义js回调函数 | 标识符:`file` | 参数 | 含义 | 类型 | | --- | --- | --- | | name | name值 | string | | title | 标题 | string | | tips | 提示 | string | | default | 默认值 | string | | size | 限制大小(单位kb) | string | | ext | 文件后缀(如:'rar,doc,zip') | string | | extra_class | 额外css类 | string | ### 简单例子 ~~~ return ZBuilder::make('form') ->addFile('file', '文件') ->fetch(); ~~~ 效果: ![](https://box.kancloud.cn/fc6b6d09742e9d48dcb75123312926c2_358x111.png) ### 默认值 默认值是附件id,不要填写文件地址 ### 限制大小 默认可以不同填写大小限制,可以在后台,“系统” -> “系统设置” -> “上传”设置。 如果在某些情况下,需要重新定义,可以填写此参数,大小为kb,比如限制上传大小为1mb。 ~~~ return ZBuilder::make('form') ->addFile('file', '文件', '', '', '1024') ->fetch(); ~~~ ### 文件后缀 跟限制大小一样,可以在后台“系统” -> “系统设置” -> “上传”设置。 也可以重新定义 ~~~ return ZBuilder::make('form') ->addFile('file', '文件', '', '', '1024', 'zip,7z') ->fetch(); ~~~ ### 自定义js回调 从1.0.5版本开始,可通过自定义js回调函数来处理上传成功之后,或者上传失败之后需要做的事情,比如: ~~~ return ZBuilder::make('form') ->addFile('file', '文件') ->js('test') // 引入自定义的外部js文件 ->fetch(); ~~~ 然后在**test.js**中定义 ~~~ var dp_file_upload_success = function () { console.log(1111) }; ~~~ 那么在文件上传成功后,会执行`dp_file_upload_success`函数,在控制台输出`1111`.当然了,你也可以利用jQuery给表单添加个按钮,或者显示隐藏某些元素,这个按自己实际需求做就可以了。 >[info] `dp_file_upload_success`函数是针对表单中的所有文件上传组件,包括单文件上传,多文件上传,也就是说,不管你的表单中添加了多少个文件上传组件,每次上传成功,都会去执行`dp_file_upload_success`函数。 如果只想某个文件上传组件上传成功时才触发`dp_file_upload_success`函数,可以这么做。 ~~~ return ZBuilder::make('form') ->addFile('file1', '文件1') ->addFile('file2', '文件2') ->js('test') // 引入自定义的外部js文件 ->fetch(); ~~~ **test.js**代码如下: ~~~ var dp_file_upload_success_file2 = function () { console.log(1111) }; ~~~ 这样的话,只有当file2这个组件上传文件成功后才会触发`dp_file_upload_success_file2`函数。而当file1组件上传文件成功后,是不会触发`dp_file_upload_success_file2`函数的。 除了`dp_file_upload_success`函数外,还支持以下回调函数。 | 全局函数 | 含义 | | --- | --- | | dp_file_upload_success | 文件上传成功后执行,针对所有文件上传组件 | | dp_file_upload_success_表单项名 | 仅对某个文件上传组件上传成功后起作用 | | dp_file_upload_error | 文件上传失败后执行,针对所有文件上传组件 | | dp_file_upload_error_表单项名 | 仅对某个文件上传组件上传失败后起作用 | | dp_file_upload_complete | 文件上传完成后执行,针对所有文件上传组件 | | dp_file_upload_complete_表单项名 | 仅对某个文件上传组件上传完成后起作用 |