作者：白狼 出處：http://www.manks.top/yii2_multiply_images.html 本文版權歸作者，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

文件上傳也寫過幾篇文章了，包括最基本的yii2文件上傳、異步上傳到又拍云以及百度編輯器圖片上傳的問題，貌似不說點多圖上傳的就不完美。

今天介紹一款多圖上傳的插件 FileInput，至于為什么選中了TA作為我們上傳的插件，一來這貨跟Yii2有一腿，用起來方便；二來嘛，用這個插件不僅添加的時候好操作，修改的時候也可以直接通過異步的方式將圖片悄無聲息的刪掉或者新增；最值得一提的是，界面效果融合了bootstrap，清爽簡潔美觀，看起來舒服。

說重點，看具體步驟

首先還是先安裝組件

composer require kartik-v/yii2-widget-fileinput "@dev"

先做一個必要的說明：假設我們有一張商品表，一張商品圖片表，商品圖片表只對商品id和圖片地址進行存儲

看基本使用

use kartik\file\FileInput;

// 非ActiveForm的表單

echo '圖片';

echo FileInput::widget([

'model' => $model,

'attribute' => 'image[]',

'options' => ['multiple' => true]

]);

//使用ActiveForm的表單

echo $form->field($model, 'image[]')->widget(FileInput::classname(), [

'options' => ['multiple' => true],

]);

上面上傳多圖，只需要設置multiple=true即可，記得選擇圖片的時候多選。

如此一來，圖片選擇好了直接提交表單就好，文件上傳的程序需要自行處理，如果你還沒有實現，可以參考文件上傳的基本操作。

多圖上傳的唯一麻煩就是，修改的時候怎么才方便？不著急，FileInput都幫我們解決了！

我們看編輯的時候圖片的展示以及如何異步的刪除單個或者多個圖片！

// 視圖文件

use kartik\file\FileInput;

'options' => ['enctype'=>'multipart/form-data'],

]); ?>

echo $form->field($model, 'banner_url[]')->label('banner圖')->widget(FileInput::classname(), [

'options' => ['multiple' => true],

'pluginOptions' => [

// 需要預覽的文件格式

'previewFileType' => 'image',

// 預覽的文件

'initialPreview' => ['圖片1', '圖片2', '圖片3'],

// 需要展示的圖片設置，比如圖片的寬度等

'initialPreviewConfig' => ['width' => '120px'],

// 是否展示預覽圖

'initialPreviewAsData' => true,

// 異步上傳的接口地址設置

'uploadUrl' => Url::toRoute(['/goods/async-image']),

// 異步上傳需要攜帶的其他參數，比如商品id等

'uploadExtraData' => [

'goods_id' => $id,

],

'uploadAsync' => true,

// 最少上傳的文件個數限制

'minFileCount' => 1,

// 最多上傳的文件個數限制

'maxFileCount' => 10,

// 是否顯示移除按鈕，指input上面的移除按鈕，非具體圖片上的移除按鈕

'showRemove' => true,

// 是否顯示上傳按鈕，指input上面的上傳按鈕，非具體圖片上的上傳按鈕

'showUpload' => true,

//是否顯示[選擇]按鈕,指input上面的[選擇]按鈕,非具體圖片上的上傳按鈕

'showBrowse' => true,

// 展示圖片區域是否可點擊選擇多文件

'browseOnZoneClick' => true,

// 如果要設置具體圖片上的移除、上傳和展示按鈕，需要設置該選項

'fileActionSettings' => [

// 設置具體圖片的查看屬性為false,默認為true

'showZoom' => false,

// 設置具體圖片的上傳屬性為true,默認為true

'showUpload' => true,

// 設置具體圖片的移除屬性為true,默認為true

'showRemove' => true,

],

],

// 一些事件行為

'pluginEvents' => [

// 上傳成功后的回調方法，需要的可查看data后再做具體操作，一般不需要設置

"fileuploaded" => "function (event, data, id, index) {

console.log(data);

}",

],

]);

?>

如上所述，基本上都是組件 FileInput的基本屬性和設置，我們這里也僅僅羅列了一些常用的屬性介紹，如有所需，可查看文檔看屬性的詳細說明。

按照如上所配置，我們預覽下效果圖

(圖片見原文)

感覺上效果很是可以，在開始寫php代碼實現之前，我們先在controller中實現 initialPreview和 initialPreviewConfig的配置

[考慮目前國內網站大部分采集文章十分頻繁，更有甚者不注明原文出處，原作者更希望看客們查看原文，以防有任何問題不能更新所有文章，避免誤導！]

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。