README

渲染一个 Dropzone Input 小部件。

安装

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

运行以下命令之一

$ composer require singularity/yii2-dropzoneinput:~1.0

或者在您的 composer.json 文件的 require 部分添加以下内容

"singularity/yii2-dropzoneinput": "~1.0"

使用方法

与 ActiveForm 一起使用

use singularity\dropzoneinput\DropzoneInput;

...

<?= $form->field($model, 'imageIds'])->widget(DropzoneInput::class, [
    'files' => $data
]); ?>

不与 ActiveForm 一起使用

use singularity\dropzoneinput\DropzoneInput;

...

<?= DropzoneInput::widget([
    'model' => $model,
    'attribute' => 'imageIds',
    'files' => $data
]) ?>

选项

预加载文件

示例

[
    'files' => $files // default empty
]

期望的文件格式

$file = [
    'id' => 100,
    'name' => 'My image',
    'size' => 5,
    'status' => 'success',
    'url' => Url::to(['/image/view', 'id' => 100, 'spec' => 'w120']), // dropzone thumbnail image url
    'src' => Url::to(['/image/view', 'id' => 100, 'spec' => 'w1200']) // full preview image url
];

高亮第一个项目

示例

[
    'highlightFirst' => true // default false
]

启用旋转

示例

[
    'enableRotate' => true // default false
    'clientOptions' => [
        'rotateUrl' => Url::to(['/image/rotate'])
    ]
]

启用预览

示例

[
    'enablePreview' => true // default false
]

启用排序

示例

[
    'enableSort' => true // default true
]

启用裁剪

示例

[
    'enableCrop' => true // default false,
    'cropperOptions' => [
        'aspectRatio' => 1.4
    ],
    'clientOptions' => [
        'parallelUploads' => 1 // default 2 (it is recommended to set this to 1 when using crop)
    ],
    'beforeCrop' => new JsExpression("function() {
        console.log('Just before image is cropped!');
    }"),
]

自定义移除消息

示例

[
    'removeMessage' => 'Are you sure you want to delete image?' //this is the default
]

请参阅 Cropper.JS 以获取完整文档

贡献

有关详细信息，请参阅 CONTRIBUTING

致谢

许可

BSD 许可证 (BSD)。有关更多信息，请参阅许可文件

#InventTomorrow
www.singularity.is

singularity / yii2-dropzoneinput

维护者

详细信息