白狼栈 2016-06-23 13:07:57 19786次浏览 32条评论 28 4 0

作者:白狼 出处: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中获取商品关联的图片,用于展示或者说用于商品图片的删除\新增操作。

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

继续阅读

觉得很赞
亿速云
  • 评论于 2016-07-08 17:27 举报

    QQ截图20160708172628.png

    有问题啊·~老兄

  • 评论于 2016-07-08 17:33 举报

    如果 把 "kartik-v/yii2-widget-fileinput" : "*" 加入到 composer.json 文件中,执行 composer update 命令,会把所有的安装的东西 都update了, 但是我不想~~只想下载 这一个东东

    觉得很赞
  • 评论于 2016-07-28 19:10 举报

    这个多图花了几周,终于收下

    3 条回复
    评论于 2016-07-28 19:41 回复

    看我这教程,还能花几周?

    评论于 2016-07-29 16:58 回复

    看文档当然要不了多久,在网站应用需要花时间,以前一直用单图上传,现在更新数据表,就改用多图了!
    你这教程在保存图片的时候有点问题,上次没有解决就一直搁着,不知道你自己测试过没有?

    评论于 2016-07-29 18:05 回复

    问题抛出来

  • 评论于 2016-07-31 22:13 举报

    yii2文件上传,为什么我实现不了呢?

    5 条回复
    评论于 2016-07-31 23:05 回复

    问题抛出来

    评论于 2016-08-01 10:40 回复

    upload.php,复制后只改了命名空间,namespace app\modules\admin\models;
    视图tools/upload.php 复制没做改动;
    ToolsController 复制,改命名空间:namespace app\modules\admin\controllers;

                                  文件上传存放的目录 $dir = "../../../public/uploads/".date("Ymd");
    

    项目根目录新建 /public/uploads/
    访问:?r=admin/tools/upload 显示正常,
    选择文件->提交后,返未选择文件,
    查看文件夹也没有上传的文件!!
    问题出在哪里??

    评论于 2016-08-01 12:17 回复

    解决了,你的文件存放目录有误导!!!!

            //文件上传存放的目录
            $dir = "../../public/uploads/".date("Ymd");  
    

    应该为根目录算起:$dir = "public/uploads/image/".date("Ymd");
    这样就没有问题了

    评论于 2016-08-01 13:15 回复

    两个问题
    ①、你说的问题不属于当前教程,当前文章并没有说让你设定文件存放目录
    ②、我在【文件上传】一文中说的有这个文件存放的目录,你要理解文章的实质,教你如何去使用yii2的文件上传,而不是让你完全照搬,很明显你的分了modules 我文章中所说其实没有分modules去做的设置,而且我并没有说文件存放目录一定是我所设置的,要灵活变通!

    评论于 2016-08-01 14:28 回复

    受教,谢谢

  • 评论于 2016-08-04 01:54 举报

    我有个问题:
    这个插件在我开了异步上传的时候,但没有写异步上传调用的方法,实际上我只想用异步删除,然后用POST表单同步提交(我在做编辑功能),点击上传同时选择多个图片

    $upfile = UploadedFile::getInstances($projectModel, 'home_img');
    

    $upfile 可以接收到多张图。但是每次只选一张,多次添加,然后提交表单$upfile只能得到最后一张图片的。大家有这个问题吗?

    1 条回复
    评论于 2016-08-04 09:17 回复

    同步提交 图片属性设置数组形式的试试 image[]

  • 评论于 2016-09-09 18:34 举报

    我怎么感觉有问题啊;按照这个方法我鼓秋了一下午,还是不行!根本提交不了数据啊!

    1 条回复
    评论于 2016-09-20 18:58 回复

    https://github.com/kartik-v/yii2-widget-fileinput 狼哥写的复杂了。。你可以看这个,有安装用法 (Usage项 )
    但是还要配合一下 本身的UploadedFile来使用。

        <?= $form->field($model, 'file')->fileInput()->widget(FileInput::className(),[
                'options' => ['accept' => 'image/*'],
                'pluginOptions' => [
                    // 需要预览的文件格式
    

    // 'previewFileType' => 'image',

                    // 预览的文件
                    'initialPreview' => '/'.$model->file,
                    // 是否展示预览图
                    'initialPreviewAsData' => true,
            ]]) ?>  
    
  • 评论于 2016-11-14 14:59 举报

    我只要单图上传,controller里怎么写

  • 评论于 2016-11-16 11:36 举报

    如果设置了至少上传一张图片,那修改的时候如果不修改图片,也会提示至少需要上传一张图片,此时要如何配置。

  • 评论于 2016-11-22 17:11 举报

    楼主呢 pluginEvents 行为事件不执行啊!求教啊。

  • 评论于 2017-01-20 11:41 举报

    楼主请问默认赋值怎么做

    1 条回复
    评论于 2017-04-25 15:13 回复

    同问 编辑时,不传图片就取不到值了,而且这个异步上传不怎么好用

  • 评论于 2017-04-26 19:59 举报

    请教一个问题,我使用html原生的form表单,按照样例引入css和js文件,使用
    ,是可以正常显示的。
    但我想使用Yii框架自带的ActiveForm的表单,结果就不能显示了,view视图文件如下,
    use yii\bootstrap\ActiveForm;
    use yii\helpers\Html;
    use kartik\file\FileInput;
    use yii\helpers\Url;


    <?php
    $form = ActiveForm::begin([
    'options'=>['class'=>'new_user_form inline_input'],
    'fieldConfig'=>[
    'template'=>'{label}{input}{error}'
    ],
    ]) ?>

    <?php echo $form->field($model, 'cover[]')->widget(FileInput::classname(), [
    'options' => ['multiple' => true],
    ]); ?>

  • 评论于 2017-06-20 13:10 举报

    <?= FileInput::widget([

                    'name' => 'cccc',
                    'attribute' => 'banner[]',
                    'options' => ['multiple' => true]
                ]); ?>     
    

    我用的是NAME 我点上传后, 就什么也没了, 图片也没上传, 不知道参数怎么写

  • 评论于 2017-07-07 09:29 举报

    学习了,谢谢啊!

  • 评论于 2017-07-07 09:36 举报

    请教个问题,为什么那个设置图片的宽度参数不起作用,请教大神啊,就下面这段配置,
    'initialPreviewConfig' => ['width' => '120px'],

  • 评论于 2017-07-09 15:47 举报

    11.png

    修改图片时一直验证图片为空?

    1 条回复
    评论于 2017-09-18 13:36 回复

    我也是这样的

  • 评论于 2017-08-01 17:04 举报

    为什么我的加载了FileInput 页面没有任何变化呢?

  • 评论于 2017-08-30 11:49 举报

    如果用多个fileinput,每个input只上传一张图片 模型和控制器应该怎么写

  • 评论于 2017-09-18 16:49 举报

    在update页面上 不会显示出属性的值嘛

  • 评论于 2017-10-23 09:55 举报

    initialPreview 里的预览文件 加载完删除按钮不好用,必须重新浏览文件 才能删除.有遇到这个问题的吗?

  • 评论于 2017-11-23 11:40 举报

    问一下,上传多图时,$image = UploadedFile::getInstance($model, 'imgs');结果为空

您需要登录后才可以评论。登录 | 立即注册