YII2.0框架, 多图片上传功能 [基础教程]

作者:zlong0314 发布于:2017-09-28 浏览:248次 收藏

此小部件实现了文章或项目添加的时候,可以传多张图片,也以对上传成功的图片进行删除(如果配置项 trueDelete 为真, 则服务器上的真实图片也会删除)

此小部件不能在上传图片的时候, 选N张图片,只能一张一张的选择进行上传

安装说明

将下载的文件夹放入公共目录,本实例路径为(/common/widgets/),请根据项目实例自行安排, UploadAction.php文件内有使用说明,请进行参考。

config:

use yii\helpers\Url;

return [
    /* 上传图片配置项 */
    'fieldName' => "fileData", /* 提交的图片表单名称 */
    'maxSize' => 2097152, /* 上传大小限制,单位B */
    'allowFiles'=> [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    'pathFormat'=> "/uploads/{yyyy}/{mm}/{dd}/{date}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
    'uploadFilePath' => str_replace('backend', 'frontend', $_SERVER['DOCUMENT_ROOT']), /* 文件保存绝对路径   */
    'uploadType' => 'upload', //remote远程图片   base64 base64编码 upload 正常的上传方法,
    'serverUrl' => Url::to('/admin/upload/upload_more'),
    'trueDelete' => 'true' //为TRUE是,点确定后, 将会把真实图片删除,为false时, 只会把父元素移除, 不会删除真实图片
];

controller:

public function actions() {
        return [
            'upload_more'=>[
                'class' => 'common\widgets\batch_upload\UploadAction'
            ]
        ];
    }


view:

<?=$form->field($model, 'pics')->widget('common\widgets\batch_upload\FileUpload')?>

上传图片插件为AjaxUpload3.9,无刷新上传图片,使用前, 请查看config.php进行配置,默认【图片表单名称】为fileData

#实现预览

功能实现

image

小部件存放目录

image

点击这里查看详细介绍

如果文章对您有所帮助,希望继续支持我们,您的支持是我们最大的动力 ¥打赏
标签: YII2 多图片上传 上传图片
声明:文章内容由作者原创或整理,未经允许,不得转载!
您需要登录后才可以评论。登录 | 立即注册