## addImage('name值', '标题' [, '提示', '默认值', '限制大小', '文件后缀', '额外css类', '缩略图参数', '水印参数']) | 版本 | 新增功能 | | --- | --- | | 1.0.5 | 自定义js回调函数 | | 1.2.0 | 自定义生成缩略图，自定义水印 | 标识符：`image` | 参数 | 含义 | 类型 | | --- | --- | --- | | name | name值 | string | | title | 标题 | string | | tips | 提示 | string | | default | 默认值 | string | | size | 限制大小（单位kb） | string | | ext | 文件后缀（如：'jpg,png,gif'） | string | | extra_class | 额外css类 | string | | thumb | 缩略图参数(1.2.0+) | string/array | | watermark | 水印参数(1.2.0+) | string/array | 单图片上传的用法和单文件上传是一样的，具体信息请参考[单文件上传](单文件上传.md)。 >[info]上传后，保存的是图片附件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给表单添加个按钮，或者显示隐藏某些元素，这个按自己实际需求做就可以了。 >[info] `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_表单项名 | 仅对某个图片上传组件上传完成后起作用 | ### 自定义生成缩略图 >[info] 此参数需要1.2.0或以上版本支持。 **生成30x30的缩略图** 如果需要生成30x30的缩略图，那么size参数要写成30,30（用逗号隔开） ~~~ return ZBuilder::make('form') ->addImage('pic', '图片', '', '', '', '', '', ['size' => '30,30']) ->fetch(); ~~~ 或者 ~~~ return ZBuilder::make('form') ->addFormItems([ ['image', 'pic', '图片', '', '', '', '', '', ['size' => '30,30']] ]) ->fetch(); ~~~ **设置缩略图裁剪类型** 默认情况下，缩略图的裁剪方式是“等比例缩放”，如果需要设置其他类型，可以这样写 ~~~ return ZBuilder::make('form') ->addImage('pic', '图片', '', '', '', '', '', ['size' => '30,30', 'type' => 2]) ->fetch(); ~~~ type参数可以设置以下几种，默认为1，即等比例缩放。 | 参数 | 含义 | | --- | --- | | 1 | 等比例缩放 | | 2 | 缩放后填充 | | 3 | 居中裁剪 | | 4 | 左上角裁剪 | | 5 | 右下角裁剪 | | 6 | 固定尺寸缩放 | **关闭缩略图功能** >[danger]默认情况下，如果没有设置缩略图参数，那么是否生成缩略图由【系统】【系统设置】【上传】中的配置决定。  如果在表单项参数中设置了缩略图参数，则以表单项的缩略图参数为优先。 如果在系统设置中设置了缩略图参数，但在某些情况下，想临时不生成缩略图，则可以将缩略图参数设置为字符串'`close`'。 ~~~ return ZBuilder::make('form') ->addImage('pic', '图片', '', '', '', '', '', 'close') ->fetch(); ~~~ ### 自定义水印 >[info] 此参数需要1.2.0或以上版本支持。 设置参数的img为附件id，即水印图片的附件id，如果附件不存在，则不会添加水印。 ~~~ return ZBuilder::make('form') ->addImage('pic', '图片', '', '', '', '', '', '', ['img' => 10]) ->fetch(); ~~~ **设置水印的位置** ~~~ return ZBuilder::make('form') ->addImage('pic', '图片', '', '', '', '', '', '', ['img' => 10, 'pos' => 1]) ->fetch(); ~~~ 水印位置有以下几个参数，默认为9，即右下角。 | 参数 | 含义 | | --- | --- | | 1 | 左上角 | | 2 | 上居中 | | 3 | 右上角 | | 4 | 左居中 | | 5 | 居中 | | 6 | 右居中 | | 7 | 左下角 | | 8 | 下居中 | | 9 | 右下角 | 设置水印透明度 ~~~ return ZBuilder::make('form') ->addImage('pic', '图片', '', '', '', '', '', '', ['img' => 10, 'pos' => 1, 'alpha' => 90]) ->fetch(); ~~~ 透明度取值范围是0~100，数字越小，透明度越高。 不添加水印 >[danger]默认情况下，如果没有设置水印参数，那么是否添加水印由【系统】【系统设置】【上传】中的配置决定。  如果在表单项参数中设置了水印图参数，则以表单项的水印参数为优先。 如果在系统设置中设置了打开了水印功能，但在某些情况下，想临时不添加水印，则可以将水印参数设置为字符串'`close`'。 ~~~ return ZBuilder::make('form') ->addImage('pic', '图片', '', '', '', '', '', '', 'close') ->fetch(); ~~~