yii2組件之多圖上傳插件FileInput的詳細使用

做者：白狼 出處：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 '<label class="control-label">圖片</label>';
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;
<?php $form = ActiveForm::begin([
    'options' => ['enctype'=>'multipart/form-data'],
]); ?>


<?php 
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);
        }",
    ],
]);
?>
<?php ActiveForm::end(); ?>

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

按照如上所配置，咱們預覽下效果圖 （圖片見原文）

感受上效果非常能夠，在開始寫php代碼實現以前，咱們先在controller中實現 initialPreview和 initialPreviewConfig的配置

假設上面的視圖文件是用戶展現商品圖片的詳情頁，當前controller是指渲染視圖文件的controller，則須要在controller中獲取商品關聯的圖片，用於展現或者說用於商品圖片的刪除\新增操做。

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

繼續閱讀