Detailed use of the multi-image upload plug-in FileInput of the yii2 component, yii2fileinput

Author: Bailang Source: http://www.manks.top/yii2_multiply_images.html The copyright of this article belongs to The author is welcome to reprint, but this statement must be retained without the author's consent, and a link to the original text should be provided in an obvious position on the article page, otherwise the right to pursue legal liability is reserved.

I have also written several articles on file upload, including the most basic yii2 file upload, asynchronous upload to Youpaiyun and the problem of Baidu editor image upload. It seems that it is not perfect if I don’t mention multi-image upload.

Today we introduce FileInput, a multi-image upload plug-in. As for why we chose TA as our upload plug-in, firstly, this product has something to do with Yii2 and is easy to use; secondly, using this plug-in is not only good when adding When operating and modifying, you can also directly delete pictures silently in an asynchronous manner; the most noteworthy thing is that the interface effect incorporates bootstrap, which is refreshing, concise, beautiful, and comfortable to look at.

Use a scene to facilitate the explanation

Suppose we have a product table and a product image table. The product image table only stores product ids and image addresses

Preparation before starting

1. Download the components we need

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

2. Prepare a product table and a product picture table. The product picture table includes the product id and picture url

Synchronous upload of multiple images

What we call synchronous operation here is to select multiple pictures when adding products, and then submit them together with the form. Let’s see how to use it.

<span>use</span> kartik\<span>file</span><span>\FileInput;

</span><span>//</span><span> 非ActiveForm的表單</span>
<span>echo</span> '<label class="control-label">圖片</label>'<span>;
</span><span>echo</span> FileInput::<span>widget([
    </span>'model' => <span>$model</span>,
    'attribute' => 'banner[]',
    'options' => ['multiple' => <span>true</span><span>]
]);


</span><span>//</span><span>使用ActiveForm的表單</span>
<span>echo</span> <span>$form</span>->field(<span>$model</span>, 'banner[]')->widget(FileInput::classname(),<span> [
    </span>'options' => ['multiple' => <span>true</span>],<span>
]);</span>

If you want to upload multiple pictures, remember to select multiple pictures when selecting them.

In this way, just submit the form directly after selecting the image. The back-end file upload program needs to be handled by yourself. If you haven't implemented it yet, you can refer to the basic operation of file upload. It should be reminded that, taking this article as an example, when we add multiple pictures to the product here, we actually operate two data tables.

Asynchronous modification (including deletion and addition) operations of product images

As you can see at the beginning, for the product banner image, we upload it along with the form submission. Next, let’s talk about this troublesome matter: how to display the product image when editing the product and how to update the product image. Add and delete operations?

First, we get the banner image corresponding to the product in the controller. Before displaying the banner image on the editing product page, we process it a little:

<span>//</span><span> 假設(shè)商品的banner圖是 $relationBanners的集合, $id是商品的id
// $relationBanners的數(shù)據(jù)結(jié)構(gòu)如：</span><span>
/*</span><span>*
 * Array
 *(
 *   [0] => Array
 *        (
 *            [id] => 1484314
 *            [goods_id] => 1173376
 *            [banner] => ./uploads/20160617/146612713857635322241f2.png
 *        )
 *
 *)
 </span><span>*/</span>

<span>$relationBanners</span> = Banner::find()->where(['goods_id' => <span>$id</span>])->asArray()-><span>all();

</span><span>//</span><span> @param $p1 Array 需要預(yù)覽的商品圖，是商品圖的一個(gè)集合
// @param $p2 Array 對(duì)應(yīng)商品圖的操作屬性，我們這里包括商品圖刪除的地址和商品圖的id</span>
<span>$p1</span> = <span>$p2</span> =<span> [];
</span><span>if</span> (<span>$relationBanners</span><span>) {
    </span><span>foreach</span> (<span>$relationBanners</span> <span>as</span> <span>$k</span> => <span>$v</span><span>) {
        </span><span>$p1</span>[<span>$k</span>] = <span>$v</span>['banner'<span>];
        </span><span>$p2</span>[<span>$k</span>] =<span> [
            </span><span>//</span><span> 要?jiǎng)h除商品圖的地址</span>
            'url' => Url::toRoute('/banner/delete'),
            <span>//</span><span> 商品圖對(duì)應(yīng)的商品圖id</span>
            'key' => <span>$v</span>['id'],<span>
        ];
    }
}

</span><span>return</span> <span>$this</span>->render('banner',<span> [
    </span><span>//</span><span> other params</span>
    'p1' => <span>$p1</span>,
    'p2' => <span>$p2</span>,
    <span>//</span><span> 商品id</span>
    'id' => <span>$id</span>,<span> 
]);</span>

For the code of view file View, please refer to

<span>//</span><span> 視圖文件</span>
<span>use</span> kartik\<span>file</span><span>\FileInput;

</span><?<span>php 
</span><span>echo</span> <span>$form</span>->field(<span>$model</span>, 'banner[]')->label('banner圖')->widget(FileInput::classname(),<span> [
    </span>'options' => ['multiple' => <span>true</span>],
    'pluginOptions' =><span> [
        </span><span>//</span><span> 需要預(yù)覽的文件格式</span>
        'previewFileType' => 'image',
        <span>//</span><span> 預(yù)覽的文件</span>
        'initialPreview' => <span>$p1</span>,
        <span>//</span><span> 需要展示的圖片設(shè)置，比如圖片的寬度等</span>
        'initialPreviewConfig' => <span>$p2</span>,
        <span>//</span><span> 是否展示預(yù)覽圖</span>
        'initialPreviewAsData' => <span>true</span>,
        <span>//</span><span> 異步上傳的接口地址設(shè)置</span>
        'uploadUrl' => Url::toRoute(['/goods/async-banner']),
        <span>//</span><span> 異步上傳需要攜帶的其他參數(shù)，比如商品id等</span>
        'uploadExtraData' =><span> [
            </span>'goods_id' => <span>$id</span>,<span>
        ]</span>,
        'uploadAsync' => <span>true</span>,
        <span>//</span><span> 最少上傳的文件個(gè)數(shù)限制</span>
        'minFileCount' => 1,
        <span>//</span><span> 最多上傳的文件個(gè)數(shù)限制</span>
        'maxFileCount' => 10,
        <span>//</span><span> 是否顯示移除按鈕，指input上面的移除按鈕，非具體圖片上的移除按鈕</span>
        'showRemove' => <span>true</span>,
        <span>//</span><span> 是否顯示上傳按鈕，指input上面的上傳按鈕，非具體圖片上的上傳按鈕</span>
        'showUpload' => <span>true</span>,
        <span>//</span><span>是否顯示[選擇]按鈕,指input上面的[選擇]按鈕,非具體圖片上的上傳按鈕</span>
        'showBrowse' => <span>true</span>,
        <span>//</span><span> 展示圖片區(qū)域是否可點(diǎn)擊選擇多文件</span>
        'browseOnZoneClick' => <span>true</span>,
        <span>//</span><span> 如果要設(shè)置具體圖片上的移除、上傳和展示按鈕，需要設(shè)置該選項(xiàng)</span>
        'fileActionSettings' =><span> [
            </span><span>//</span><span> 設(shè)置具體圖片的查看屬性為false,默認(rèn)為true</span>
            'showZoom' => <span>false</span>,
            <span>//</span><span> 設(shè)置具體圖片的上傳屬性為true,默認(rèn)為true</span>
            'showUpload' => <span>true</span>,
            <span>//</span><span> 設(shè)置具體圖片的移除屬性為true,默認(rèn)為true</span>
            'showRemove' => <span>true</span>,<span>
        ]</span>,<span>
    ]</span>,
    <span>//</span><span> 一些事件行為</span>
    'pluginEvents' =><span> [
        </span><span>//</span><span> 上傳成功后的回調(diào)方法，需要的可查看data后再做具體操作，一般不需要設(shè)置</span>
        "fileuploaded" => "<span>function (event, data, id, index) {
            console.log(data);
        }</span>",<span>
    ]</span>,<span>
]);
</span>?>

As mentioned above, we have listed some basic properties and settings of the component FileInput. If necessary, you can check the document for detailed description of the properties.

[Considering that most domestic websites currently collect articles very frequently, and some even do not indicate the source of the original article, the original author hopes that readers can check the original article to prevent any problems and not update all articles to avoid misleading! ]

View original text