addImage('name值', '标题' [, '提示', '默认值', '限制大小', '文件后缀', '额外css类'])

版本 新增功能
1.0.5 自定义js回调函数

标识符:image

参数 含义 类型
name name值 string
title 标题 string
tips 提示 string
default 默认值 string
size 限制大小 string
ext 文件后缀 string
extra_class 额外css类 string

单图片上传的用法和单文件上传是一样的,具体信息请参考单文件上传

上传后,保存的是图片附件id,如果在前台页面使用时,需要获取该图片路径,请使用get_file_path(附件id),如:<img src="{:get_file_path(附件id)}">,或者<img src="{$id|get_file_path}">

自定义js回调

从1.0.5版本开始,可通过自定义js回调函数来处理上传成功之后,或者上传失败之后需要做的事情,比如:

return ZBuilder::make('form')
    ->addImage('pic', '图片')
    ->js('test') // 引入自定义的外部js文件
    ->fetch();

然后在test.js中定义

var dp_image_upload_success = function () {
  console.log(1111)
};

那么在图片上传成功后,会执行dp_image_upload_success函数,在控制台输出1111.当然了,你也可以利用jQuery给表单添加个按钮,或者显示隐藏某些元素,这个按自己实际需求做就可以了。

dp_image_upload_success函数是针对表单中的所有图片上传组件,包括单图片上传,多图片上传,也就是说,不管你的表单中添加了多少个图片上传组件,每次上传成功,都会去执行dp_image_upload_success函数。

如果只想某个图片上传组件上传成功时才触发dp_image_upload_success函数,可以这么做。

return ZBuilder::make('form')
    ->addImage('pic1', '图片1')
    ->addImage('pic2', '图片2')
    ->js('test') // 引入自定义的外部js文件
    ->fetch();

test.js代码如下:

var dp_image_upload_success_pic2 = function () {
  console.log(1111)
};

这样的话,只有当pic2这个组件上传图片成功后才会触发dp_image_upload_success_pic2函数。而当pic1组件上传图片成功后,是不会触发dp_image_upload_success_pic2函数的。

除了dp_image_upload_success函数外,还支持以下回调函数。
| 全局函数 | 含义 |
| --- | --- |
| dp_image_upload_success | 图片上传成功后执行,针对所有图片上传组件 |
| dp_image_upload_success_表单项名 | 仅对某个图片上传组件上传成功后起作用 |
| dp_image_upload_error | 图片上传失败后执行,针对所有图片上传组件 |
| dp_image_upload_error_表单项名 | 仅对某个图片上传组件上传失败后起作用 |
| dp_image_upload_complete | 图片上传完成后执行,针对所有图片上传组件 |
| dp_image_upload_complete_表单项名 | 仅对某个图片上传组件上传完成后起作用 |