yii2组件之多图上传插件FileInput的详细使用，yii2fileinput

yii2组件之多图上传插件FileInput的详细使用，yii2fileinput

作者：白狼 出处：http://www.manks.top/yii2_multiply_images.html 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

文件上传也写过几篇文章了，包括最基本的yii2文件上传、异步上传到又拍云以及百度编辑器图片上传的问题，貌似不说点多图上传的就不完美。

今天介绍一款多图上传的插件 FileInput，至于为什么选中了TA作为我们上传的插件，一来这货跟Yii2有一腿，用起来方便；二来嘛，用这个插件不仅添加的时候好操作，修改的时候也可以直接通过异步的方式将图片悄无声息的删掉；最值得一提的是，界面效果融合了bootstrap，清爽简洁美观，看起来舒服。

借助一下场景，方便说明

假设我们有一张商品表，一张商品图片表，商品图片表只对商品id和图片地址进行存储

开始前准备工作

1、下载我们所需要的组件

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

2、准备一张商品表和一张商品图片表，商品图片表包括商品id和图片url即可

同步上传多图片操作

我们这里所谓的同步操作，即在添加商品时选择多张图片，然后跟随表单一同提交。来看看怎么使用的。

<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>

若是要上传多图，记得选择图片的时候多选哦。

如此一来，图片选择好了直接提交表单就好，后端文件上传的程序需要自行处理，如果你还没有实现，可以参考文件上传的基本操作。需要提醒的是，以本文为例，此处我们给商品添加多图片实际是操作了两张数据表。

商品图的异步修改（包括删除\添加）操作

开篇可以看到，对于商品的banner图，我们是跟随表单一同提交而进行的上传，接着我们说一说这个麻烦事：编辑商品的时候如何展示商品图以及如何对商品图进行更新\新增\删除的操作？

首先，我们在controller中获取商品对应的banner图，在编辑商品页面展现banner图之前，我们对其稍微进行一下处理：

<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>

视图文件View的代码可参考

<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>?>

如上所述，我们罗列了一些都是组件 FileInput的基本属性和设置，如有所需，可查看文档看属性的详细说明。

[考虑目前国内网站大部分采集文章十分频繁，更有甚者不注明原文出处，原作者更希望看客们查看原文，以防有任何问题不能更新所有文章，避免误导！]

查看原文