yii2中使用webuploader实现图片上传的实战项目

图片上传几乎是应用必备，前面也针对 kartik 的 fileinput做了一篇详细的说明，不过很多人反馈各种问题，下面针对 webuploader 的使用单独写了一个组件。该组件可以更好的处理 Yii2 在图片上传过程中带来的一系列问题，目前支持多图多字段多modal的混合上传。

介绍之前我们先演示下效果。

安装

推荐使用composer进行安装

$ php composer.phar require bailangzhan/yii2-webuploader dev-master

使用

params.php或者params-local.php内增加webuploader和domain配置项

// 图片服务器的域名设置，拼接保存在数据库中的相对地址，可通过web进行展示
'domain' => 'http://blog.m/',
'webuploader' => [
  // 后端处理图片的地址，value 是相对的地址
  'uploadUrl' => 'blog/upload',
  // 多文件分隔符
  'delimiter' => ',',
  // 基本配置
  'baseConfig' => [
    'defaultImage' => 'http://img1.imgtn.bdimg.com/it/u=2056478505,162569476&fm=26&gp=0.jpg',
    'disableGlobalDnd' => true,
    'accept' => [
      'title' => 'Images',
      'extensions' => 'gif,jpg,jpeg,bmp,png',
      'mimeTypes' => 'image/*',
    ],
    'pick' => [
      'multiple' => false,
    ],
  ],
],

webuploader['baseConfig'] 参考 webuploader官方的参数说明

视图文件

单图

<?php
  echo $form->field($model, 'file')->widget('manks\FileInput', [
  ]);
?>

多图

<?php
echo $form->field($model, 'file2')->widget('manks\FileInput', [
  'clientOptions' => [
    'pick' => [
      'multiple' => true,
    ],
    // 'server' => Url::to('upload/u2'),
    // 'accept' => [
    //   'extensions' => 'png',
    // ],
  ],
]); ?>

控制器 controller的地址可以在params.php或者params-local.php中配置 Yii::$app->params['webuploader']['uploadUrl'], 也可以在 clientOptions中配置 server 项。控制器需要返回的数据格式如下

// 错误时
{"code": 1, "msg": "error"}
// 正确时， 其中 attachment 指的是保存在数据库中的路径，url 是该图片在web可访问的地址
{"code": 0, "url": "http://domain/图片地址", "attachment": "图片地址"}

clientOptions同样参考 webuploader官方的参数说明

注意

如果是修改的多图片操作，务必保证 $model->file = 'src1,src2,src3,...'; 或者 $model->file = ['src1', 'src2'. 'src3', ...];

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Yii框架上传图片用法总结

    本文实例讲述了Yii框架上传图片用法.分享给大家供大家参考,具体如下: Yii 提供了 CUploadedFile 来上传文件,比如图片,或者文档. 官方关于这个类的介绍 : CUploadedFile represents the information for an uploaded file. Call getInstance to retrieve the instance of an uploaded file, and then use saveAs to save it on th

  • Yii2实现UploadedFile上传文件示例

    Yii2实现UploadedFile上传文件示例

    闲来无事,整理了一下自己写的文件上传类. 通过 UploadFile::getInstance($model, $attribute); UploadFile::getInstances($model, $attribute); UploadFile::getInstanceByName($name); UploadFile::getInstancesByName($name); 把表单上传的文件赋值到  UploadedFile中的  private static $_files  中 /**

  • Yii2使用自带的UploadedFile实现的文件上传

    我们先来看看在yii2中支持的图片上传怎么进行处理的. 首先我们创建model\Upload.php文件 <?php namespace backend\models; use Yii; use yii\web\UploadedFile; class Upload extends \yii\db\ActiveRecord { /** * @var UploadedFile|Null file attribute */ public $file; /** * @return array the v

  • Yii结合CKEditor实现图片上传功能

    这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它.虽然有跟CKEditor配合良好的CKFinder,不过这个东东的功能太复杂,简单看了下CKEdtior的文档,发现这个功能还是可以自己实现而不用借助CKFinder的. 下面代码虽然基于Yii Framework的,但是用其他框架或者语言思路却是完全一样的,有需要的童鞋可以参考一下. 首先要让CkEditor出现图片上传的功能,需要配置编辑器的filebrowserImageUplo

  • Yii2.0多文件上传实例说明

    Yii2.0多文件上传实例说明

      创建控制器FormController <?php namespace frontend\controllers; use Yii; use yii\web\Controller; use frontend\models\Uploadm; use yii\web\UploadedFile; class FormController extends Controller{ public function actionMyfiles(){ $model=new Uploadm(); return

  • yii上传文件或图片实例

    1.test.php 复制代码 代码如下: <body><form action="<?php echo $this->createUrl('/test/upload/');?>" method="post" enctype="multipart/form-data"><input type="file" name="file"/><input t

  • Yii2组件之多图上传插件FileInput的详细使用教程

    Yii2组件之多图上传插件FileInput的详细使用教程

    在前面给大家写个有关文件上传的文章,包括最基本的yii2文件上传.异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美. 今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便:二来嘛,用这个插件不仅添加的时候好操作,修改的时候也可以直接通过异步的方式将图片悄无声息的删掉:最值得一提的是,界面效果融合了bootstrap,清爽简洁美观,看起来舒服. 说重点,看具体步骤 首先还是先安装组件 复制代码 代码如

  • yii实现图片上传及缩略图生成的方法

    本文实例讲述了利用yii框架来实现图片上传功能并在上传成功之后自动生成缩略图的方法,分享给大家供大家参考.具体实现方法如下: Action文件: 复制代码 代码如下: <?php /**  * TestController.php  * Created on: 2014-1-26 12:59:36 by Outsider  */ class TestController extends CController {       /**      * 缩略图片生成      * @ path 图片路

  • yii2中使用webuploader实现图片上传的实战项目

    yii2中使用webuploader实现图片上传的实战项目

    图片上传几乎是应用必备,前面也针对 kartik 的 fileinput做了一篇详细的说明,不过很多人反馈各种问题,下面针对 webuploader 的使用单独写了一个组件.该组件可以更好的处理 Yii2 在图片上传过程中带来的一系列问题,目前支持多图多字段多modal的混合上传. 介绍之前我们先演示下效果. 安装 推荐使用composer进行安装 $ php composer.phar require bailangzhan/yii2-webuploader dev-master 使用 par

  • Vue项目中使用WebUploader实现文件上传的方法

    Vue项目中使用WebUploader实现文件上传的方法

    简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅 的现代 文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又 不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用 大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发 分片 与 并发 结合,将一个大文件分割成多块, 并发上传 ,极大地提高

  • Bootstrap中的fileinput 多图片上传及编辑功能

    Bootstrap中的fileinput 多图片上传及编辑功能

    大家如果对Bootstrap-fileinput 的配置不清楚的话,大家可以查看官方网站:http://plugins.krajee.com/file-input. 逻辑说明:先从后台获取数据展示,然后进行编辑. 废话不多说, 直接上代码. 1. 页面部分代码: <div class="form-group"> <label for="inputEmail3" class="col-xs-3 control-label">

  • WebUploader实现图片上传功能

    WebUploader实现图片上传功能

    本文实例为大家分享了WebUploader实现图片上传的具体代码,供大家参考,具体内容如下 描述:springmvc 在jsp页面实现 WebUploader插件上传图片, 上传到 oss阿里云存储上. 预览: 理解: 前端 WebUploader插件(这个得去看官网)调起后台,后台 request 接收文件参数, 重新拼装图片url,oss创建连接上传图片提交图片,最后返回图片绝对url和相对url给前端. 先实现前端:1.定义js 2.定义页面 //导入 WebUploader插件js.cs

  • Node.js HTTP服务器中的文件、图片上传的方法

    HTTP协议中,multipart/form-data格式用于向服务器发送二进制数据,通过这一内容类型(Content-Type)可以实现文件.图片的上传.由于这种格式发送的是二进制数据,在服务器端接收和处理数据时会与其它内容类型有所有区别. HTTP协议中的文件上传 最早的HTTP协议中是不支持文件上传的,在1995年制定的rfc1867规范中,在HTTP POST请求的内容类型Content-Type中扩展了multipart/form-data类型,该类型用于向服务器发送二进制数据,以便支

  • yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法

    我们接下来就来聊聊Yii2框架是如何整合百度编辑器umeditor的. umeditor是啥,我只听过ueditor,你这umeditor是不是盗版的东东喃?umeditor呢,说白了就是mini版的ueditor,按照百度官方说法,其实就是编辑器中的"短软小",但是功能俱全.咳咳,咱们回归正题. 首先勒,咱们先去官网下载一份mini版的ueditor umeditor,注意哦,是um editor. 下载下来解压放到项目根目录下面的 /css目录下 命名为umeditor,具体位置各

  • 在SSM框架中将图片上传到数据库中的实现代码

    在SSM框架中将图片上传到数据库中的实现代码

    今天我们来看看SSM中如何将图片转换成二进制,最后传入到自己的数据库中,好了,废话不多说,我们开始今天的学习,我这里用的编辑器是IDEA 1.导入图片上传需要的jar依赖包 <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <

  • Spring Boot 利用WebUploader进行文件上传功能

    Spring Boot 利用WebUploader进行文件上传功能

    Web Uploader简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+.两套运行时,同样的调用方式,可供用户任意选用.采用大文件分片并发上传,极大的提高了文件上传效率. 我们这里使用官网的一个例子来实现我们个人头像的上传. 我们的重点是在Spring Boo

  • 详解angularJS+Ionic移动端图片上传的解决办法

    详解angularJS+Ionic移动端图片上传的解决办法

    前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

  • vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

    一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期

随机推荐