## 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(); ~~~