yii2組件之多圖上傳外掛程式FileInput的詳細使用，yii2fileinput_PHP教程

yii2組件之多圖上傳外掛程式FileInput的詳細使用，yii2fileinput

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

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

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

藉助一下情境，方便說明

假設我們有一張商品表，一張商品圖片表，商品圖片表只對商品id和圖片地址進行儲存

開始前準備工作

1、下載我們所需要的組件

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

2、準備一張商品表和一張商品圖片表，商品圖片表包括商品id和圖片url即可

同步上傳多圖片操作

我們這裡所謂的同步操作，即在添加商品時選擇多張圖片，然後跟隨表單一同提交。來看看怎麼使用的。

use kartik\file\FileInput;// 非ActiveForm的表單echo '圖片';echo FileInput::widget([    'model' => $model,    'attribute' => 'banner[]',    'options' => ['multiple' => true]]);//使用ActiveForm的表單echo $form->field($model, 'banner[]')->widget(FileInput::classname(), [    'options' => ['multiple' => true],]);

若是要上傳多圖，記得選擇圖片的時候多選哦。

如此一來，圖片選擇好了直接提交表單就好，後端檔案上傳的程式需要自行處理，如果你還沒有實現，可以參考檔案上傳的基本操作。需要提醒的是，以本文為例，此處我們給商品添加多圖片實際是操作了兩張資料表。

商品圖的非同步修改（包括刪除\添加）操作

開篇可以看到，對於商品的banner圖，我們是跟隨表單一同提交而進行的上傳，接著我們說一說這個麻煩事：編輯商品的時候如何展示商品圖以及如何對商品圖進行更新\新增\刪除的操作？

首先，我們在controller中擷取商品對應的banner圖，在編輯商品頁面展現banner圖之前，我們對其稍微進行一下處理：

// 假設商品的banner圖是 $relationBanners的集合, $id是商品的id// $relationBanners的資料結構如：/** * Array *( *   [0] => Array *        ( *            [id] => 1484314 *            [goods_id] => 1173376 *            [banner] => ./uploads/20160617/146612713857635322241f2.png *        ) * *) */$relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all();// @param $p1 Array 需要預覽的商品圖，是商品圖的一個集合// @param $p2 Array 對應商品圖的操作屬性，我們這裡包括商品圖刪除的地址和商品圖的id$p1 = $p2 = [];if ($relationBanners) {    foreach ($relationBanners as $k => $v) {        $p1[$k] = $v['banner'];        $p2[$k] = [            // 要刪除商品圖的地址            'url' => Url::toRoute('/banner/delete'),            // 商品圖對應的商品圖id            'key' => $v['id'],        ];    }}return $this->render('banner', [    // other params    'p1' => $p1,    'p2' => $p2,    // 商品id    'id' => $id, ]);

視圖檔案View的代碼可參考

// 視圖檔案use kartik\file\FileInput;php echo $form->field($model, 'banner[]')->label('banner圖')->widget(FileInput::classname(), [    'options' => ['multiple' => true],    'pluginOptions' => [        // 需要預覽的檔案格式        'previewFileType' => 'image',        // 預覽的檔案        'initialPreview' => $p1,        // 需要展示的圖片設定，比片的寬度等        'initialPreviewConfig' => $p2,        // 是否展示預覽圖        'initialPreviewAsData' => true,        // 非同步上傳的介面地址設定        'uploadUrl' => Url::toRoute(['/goods/async-banner']),        // 非同步上傳需要攜帶的其他參數，比如商品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的基本屬性和設定，如有所需，可查看文檔看屬性的詳細說明。

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

查看原文

http://www.bkjia.com/PHPjc/1137575.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1137575.htmlTechArticleyii2組件之多圖上傳外掛程式FileInput的詳細使用，yii2fileinput 作者：白狼 出處：http://www.manks.top/yii2_multiply_images.html本文著作權歸作者，歡迎轉載，...

