twitf/yii2-dropzone

Yii2 Dropzone 扩展

安装数: 1,542

依赖项: 0

建议者: 0

安全性: 0

星标: 13

关注者: 1

分支: 2

公开问题: 0

语言:JavaScript

类型:yii2-extension

v0.4.2 2020-06-14 08:16 UTC

This package is auto-updated.

Last update: 2024-09-21 05:49:14 UTC


README

Latest Stable Version Total Downloads License

Yii2 Dropzone 扩展,支持排序

PS:再三强调不要使用jquery2.2.4以上版本,不兼容jquery2.2.4以上版本(Again and again, do not use jquery2.2.4 or above, not compatible with jquery2.2.4 or above.)

可以在此处自定义资源包 xxxx/config/config.php配置如下
'components'=>[
            'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'sourcePath' => null,// 一定不要发布该资源
                    'js' => [
                        '/js/jquery-2.2.4.min.js',
                    ]
                ],
            ],
        ],
]

安装

通过 composer 安装此扩展是首选方法。

运行

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

或添加

"twitf/yii2-dropzone": "*"

到你的 composer.json 文件的 require 部分。

使用

扩展安装后,只需在代码中简单地使用它即可

控制器示例(##这一步是必要的。)

    <?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"),//上传根目录
                ],
            ],

        ];
    }
   

视图示例 详情请查看\你的项目\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' => '7',
             'autoProcessQueue'=>false,
             '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
     ]
 ]);
 ?>

如有问题,欢迎发送邮件至我的邮箱 837422076@qq.com