README

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

运行以下命令之一：

composer require dkhlystov/yii2-uploadimage

或者在您的composer.json文件的require部分添加：

"dkhlystov/yii2-uploadimage": "*"

to the require section of your composer.json file.

使用方法

在使用小部件之前，您需要将dkhlystov\uploadimage\Module添加到您的应用程序配置中

    'modules' => [
        //...
        'uploadimage' => 'dkhlystov\uploadimage\Module',
    ],

单张图片

将单张图片上传到模型属性

<?= \dkhlystov\uploadimage\widgets\UploadImage::widget([
        'model' => $model,
        'attribute' => 'image',
]); ?>

使用ActiveForm

<?= $form->field($model, 'image')->widget(\dkhlystov\uploadimage\widgets\UploadImage::className()) ?>

如果需要缩略图

<?= \dkhlystov\uploadimage\widgets\UploadImage::widget([
        'model' => $model,
        'attribute' => 'image',
        'thumbAttribute' => 'thumb',
]); ?>

多张图片

将多张图片作为数组上传到模型属性。属性fileKey是必需的

<?= \dkhlystov\uploadimage\widgets\UploadImages::widget([
        'model' => $model,
        'attribute' => 'images',
        'fileKey' => 'file',
]); ?>

如果您需要创建缩略图，请使用thumbKey属性。要限制图片数量，请使用maxCount属性。

小部件大小

小部件中每个项目的默认大小为112×84。如果您想用其他大小渲染小部件，请使用width和height属性。

<?= $form->field($model, 'image')->widget(\dkhlystov\uploadimage\widgets\UploadImage::className(), [
    'width' => 100,
    'height' => 100,
]) ?>

最大图片大小

所有图片在上传时都会被优化。默认情况下，上传图片的最大宽度为1000，高度为750。要更改这些值，请使用maxImageWidth和maxImageHeight属性。

<?= $form->field($model, 'image')->widget(\dkhlystov\uploadimage\widgets\UploadImage::className(), [
    'maxImageWidth' => 640,
    'maxImageHeight' => 480,
]) ?>

缩略图大小

当使用缩略图时，其大小与小部件项目大小类似。要更改它，请使用thumbWidth和thumbHeight属性。

<?= $form->field($model, 'image')->widget(\dkhlystov\uploadimage\widgets\UploadImage::className(), [
    'thumbAttribute' => 'thumb',
    'thumbWidth' => 200,
    'thumbHeight' => 150,
]) ?>

添加额外数据

使用data属性向小部件中的每个图片项目添加额外数据。您可以使用简单数组或Closure为此属性提供数据。

<?= \dkhlystov\uploadimage\widgets\UploadImages::widget([
    'model' => $model,
    'attribute' => 'images',
    'fileKey' => 'file',
    'data' => function($item) {
        return [
            'id' => $item['id'],
            'description' => $item['description'],
        ];
    },
]) ?>

自定义按钮支持

要使用按钮，需要进行两个步骤：首先，在服务器端声明按钮，然后在客户端处理按钮事件。

服务器端

要添加自定义按钮，请使用buttons属性。这是一个数组，其键是按钮标识符，值是按钮配置。

<?= \dkhlystov\uploadimage\widgets\UploadImages::widget([
    'model' => $model,
    'attribute' => 'images',
    'id' => 'images',
    'fileKey' => 'file',
    'data' => function($item) {
        return ['main' => $item['main']];
    },
    'buttons' => [
        'main' => [
            'label' => '<i class="fa fa-star"></i>',
            'title' => 'Main image',
            'active' => function($item) {
                return $item['main'];
            },
        ],
    ],
]) ?>

按钮配置

label：作为按钮标签渲染的字符串，必需
title：添加到按钮的title属性的字符串
active：如果设置为true，按钮将以激活状态渲染

如果属性设置为Closure，则$item参数是渲染按钮的项目。对于新上传的图片，$item是null。

注意，您可以使用Font Awesome图标，因为它在要求中，并且会自动安装。

客户端

在您的javascript中，将ui-btnclick事件处理程序附加到小部件。在处理程序中，有id、item和other参数，它们表示用于处理小部件项目的API。

id：按钮标识符。
ui.item：当前项目管理对象。
ui.other：除了当前之外的所有项目的数据管理对象。

数据管理

item.button(id)：返回指定id的按钮的jQuery对象。
item.data(name)：返回具有指定name的项数据。
item.data(name, value)：使用指定name设置项数据值。
item.data({name1: value1, ...})：设置多个数据值。

$(document).on('ui-btnclick', '#images', function(e, id, item, other) {
    if (id == 'main') {
        item.button('main').addClass('active');
        item.data('main', 1);
        other.button('main').removeClass('active');
        other.data('main', 0);
    }
});

其他属性

默认情况下，所有图片都将上传到您的网站根目录下的/upload目录。如果您想更改它，请使用uploadPath属性。要在全局设置此路径，请在使用应用程序模块的uploadPath属性中设置。

要限制用户上传文件的大小，请使用maxFileSize属性。以兆字节为单位设置。要在全局设置它，请在使用应用程序模块的maxFileSize属性中设置。

您可以通过设置 quality 属性来更改图片质量（仅适用于 JPEG）。默认质量为 80。

您可以使用属性指定自定义错误消息。

messageMaxFileSize 显示上传文件大小超过 maxFileSize 时的情况。
messageMaxCount 显示用户尝试上传的文件数量超过 maxCount 指定时的情况。
messageFormat 显示上传文件的格式不受支持时的情况。
messageOther 显示发生其他错误时的情况。

每条消息都可能包含 {files} 子串，该子串将被实际文件替换。

dkhlystov / yii2-uploadimage

维护者

详细信息