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

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> 假设商品的banner图是 $relationBanners的集合, $id是商品的id
// $relationBanners的数据结构如：</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 需要预览的商品图，是商品图的一个集合
// @param $p2 Array 对应商品图的操作属性，我们这里包括商品图删除的地址和商品图的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> 要删除商品图的地址</span>
            'url' => Url::toRoute('/banner/delete'),
            <span>//</span><span> 商品图对应的商品图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> 需要预览的文件格式</span>
        'previewFileType' => 'image',
        <span>//</span><span> 预览的文件</span>
        'initialPreview' => <span>$p1</span>,
        <span>//</span><span> 需要展示的图片设置，比如图片的宽度等</span>
        'initialPreviewConfig' => <span>$p2</span>,
        <span>//</span><span> 是否展示预览图</span>
        'initialPreviewAsData' => <span>true</span>,
        <span>//</span><span> 异步上传的接口地址设置</span>
        'uploadUrl' => Url::toRoute(['/goods/async-banner']),
        <span>//</span><span> 异步上传需要携带的其他参数，比如商品id等</span>
        'uploadExtraData' =><span> [
            </span>'goods_id' => <span>$id</span>,<span>
        ]</span>,
        'uploadAsync' => <span>true</span>,
        <span>//</span><span> 最少上传的文件个数限制</span>
        'minFileCount' => 1,
        <span>//</span><span> 最多上传的文件个数限制</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> 展示图片区域是否可点击选择多文件</span>
        'browseOnZoneClick' => <span>true</span>,
        <span>//</span><span> 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项</span>
        'fileActionSettings' =><span> [
            </span><span>//</span><span> 设置具体图片的查看属性为false,默认为true</span>
            'showZoom' => <span>false</span>,
            <span>//</span><span> 设置具体图片的上传属性为true,默认为true</span>
            'showUpload' => <span>true</span>,
            <span>//</span><span> 设置具体图片的移除属性为true,默认为true</span>
            'showRemove' => <span>true</span>,<span>
        ]</span>,<span>
    ]</span>,
    <span>//</span><span> 一些事件行为</span>
    'pluginEvents' =><span> [
        </span><span>//</span><span> 上传成功后的回调方法，需要的可查看data后再做具体操作，一般不需要设置</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