yii2-dropzone [ 2.0 版本 ]

twitf/yii2-dropzone

基于dropzone的文件上传插件,支持排序，拖拽变动顺序即可

Either run

php composer.phar require --prefer-dist twitf/yii2-dropzone "*"

or add

"twitf/yii2-dropzone": "*"

to the require section of your composer.json file.

简单案例

Controller

>//如果你要自己实现上传或者删除也可自定义,不过图片上传完成后返回这种格式数据 {"status":"success","savePath":"/uploads/image/20180108163420/20180108163420_687658.jpg"}

    <?php
    public function actions()
    {
        return [
            'upload' => [
                'class' => 'twitf\dropzone\UploadAction',
                'config' => [
                    "filePathFormat" => "/uploads/image/".date('YmdHis').'/', //上传保存路径 返回给前台的路径
                    "fileRoot" => Yii::getAlias("@webroot"),//上传的根目录
                ],
            ],
            'remove' => [
                'class' => 'twitf\dropzone\RemoveAction',
                'config' => [
                    "fileRoot" => Yii::getAlias("@webroot"),//上传的根目录
                ],
            ],

        ];
    }
   

View

>详情 \你的项目\vendor\twitf\yii2-dropzone\DropZone.php 里面的注释（我感觉已经很详细了）

    <?php
    //最简单粗暴的调用方式
    echo \twitf\dropzone\DropZone::widget();

    //Or
    echo \twitf\dropzone\DropZone::widget(
        [
            //开启拖拽排序        
            'sortable'=>true,
            /**
             * Sortable配置参数
             * 详情参阅 https://github.com/RubaXa/Sortable#options
             * @var array
             */
            'sortableOption' => [],
            //回显的数据 内容格式
            'mockFiles'=>['/uploads/image/20180107152242/xxxxxx.jpg','/uploads/image/20180107152242/xxxxxxx.jpg'],
            /*
            * dropzone配置选项，
            * 详情参阅 http://www.dropzonejs.com/#configuration-options
            * @var array
            */
            'clientOptions' => [
                //限制文件上传数量
               'maxFiles'=>5,
                //限制的文件大小
                'maxFilesize' => '10',
                //开启自动上传 (关闭)
                'autoProcessQueue'=>true,
                'dictCancelUpload'=>'取消上传',
                'dictRemoveFile'=>'删除文件',
                //开启删除
                'addRemoveLinks'=>true
            ],
           /**dropzone事件侦听
            * 详情参阅 http://www.dropzonejs.com/#event-list （不要轻易覆盖这些事件，除非你知道他们在做些什么）
            * @var array
            */
            'clientEvents'=>[
                //上传成功事件
                'success'=>'function (file, response) {console.log(response)}',
            ]
        ]
    );

>Or

    echo $form->field($model, 'file')->widget('twitf\dropzone\DropZone', [
         //开启拖拽排序 
        'sortable'=>true,
        'clientOptions' => [
            'maxFilesize' => '7',
            'autoProcessQueue'=>true,
            'dictCancelUpload'=>'取消上传',
            'dictRemoveFile'=>'删除文件',
            'addRemoveLinks'=>true
        ]
    ]);

>Or

    echo \twitf\dropzone\DropZone::widget([
        'sortable'=>true,
        'model' => $model,
        'attribute' => 'file',
        'clientOptions' => [
            'maxFilesize' => '7',
            'autoProcessQueue'=>true,
            'dictCancelUpload'=>'取消上传',
            'dictRemoveFile'=>'删除文件',
            'addRemoveLinks'=>true
        ]
    ]);
    ?>

   ps:站点图片限制  无图 有啥问题欢迎给出意见和建议