yii2 上传图片的示例代码


Posted in PHP onNovember 02, 2018

第一步: 搭建上传类基础工作,具体请看://3water.com/article/120242.htm

第二步:建站一个product表,字段id,name,picurl.

第三步:生GII生成PRODUCT 模型,类,视图。

第四步:

main.css 放在frontend\web\css

.onedialog{position:absolute; left: 300px; top: 500px; z-index: 10; width: 700px; height: 400px;border-radius:5px;box-shadow:5px 2px 6px #000; border: 2px solid #666}
.oneiframe{ width: 100%; height: 100% }

main.js 放在 frontend\web\assets

$(function(){
 $('#product-picurl').click(function(){
 $('#oneupload').remove();
 $('<div>').appendTo($('body')).attr({"class":"onedialog",'id':"oneupload"});
 $('<iframe>').appendTo($('#oneupload')).attr({"src":"?r=upload","class":"oneiframe"})
 });
  var v=$('#product-picurl').val();
 if(v){
 $('<img>').attr({"src":v,"style":"height:50px"}).insertAfter($('#product-picurl'));
 }
});

然后在frontend\assets\AppAsset.php中注册这两个文件

class AppAsset extends AssetBundle
{
  public $basePath = '@webroot';
  public $baseUrl = '@web';
  public $css = [
    'css/site.css',
    'css/main.css',
  ];
  public $js = [
    'assets/main.js'
  ];
  public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
  ];
}

UploadController.php

<?PHP
namespace frontend\controllers;

use Yii;
use yii\web\Controller;
use app\models\UploadForm;
use yii\web\UploadedFile;

class UploadController extends Controller
{
  public function actionIndex()
  {
    $model = new UploadForm();

    if (Yii::$app->request->isPost) {
      $model->file = UploadedFile::getInstance($model, 'file');

      if ($model->file && $model->validate()) {
        //$model->file->saveAs('uploads/' . $model->file->baseName . '.' . $model->file->extension);      
        $fileName='uploads/' . date("YmdHis") . '.' . $model->file->extension;
        $model->file->saveAs($fileName);
      }
      echo "<script src='assets/upload.js'></script>;";
      echo "<script>";
      echo "var oneinput=parent.document.getElementById('product-picurl');";
      echo "parent.document.getElementById('product-picurl').value='".$fileName."';";
      echo "var oneupload = parent.document.getElementById('oneupload');";
      echo "var img = document.createElement('img');";
      echo "img.setAttribute('style', 'height:50px');";
      echo "img.src ='".$fileName."';";
      echo "insertAfter(img,oneinput);";
      echo "oneupload.parentNode.removeChild(oneupload)";
      echo "</script>";
    }

    return $this->render('upload', ['model' => $model]);
  }
}
?>

UploadForm.php

<?PHP
namespace app\models;

use yii\base\Model;
use yii\web\UploadedFile;

/**
 * UploadForm is the model behind the upload form.
 */
class UploadForm extends Model
{
  /**
   * @var UploadedFile file attribute
   */
  public $file;

  /**
   * @return array the validation rules.
   */
  public function rules()
  {
    return [
      [['file'], 'file'],
    ];
  }
}
?>

upload.php

<?php
use yii\widgets\ActiveForm;
?>

<?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?>

<?= $form->field($model, 'file')->fileInput() ?>

<button>Submit</button>

<?php ActiveForm::end() ?>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
php 目录与文件处理-郑阿奇(续)
Jul 04 PHP
php数组函数序列之in_array() 查找数组值是否存在
Oct 29 PHP
解析PHP处理换行符的问题 \r\n
Jun 13 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
Jun 20 PHP
php+Mysqli利用事务处理转账问题实例
Feb 11 PHP
php检测apache mod_rewrite模块是否安装的方法
Mar 14 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
Apr 11 PHP
Yii2增加验证码步骤详解
Apr 25 PHP
PHP中子类重载父类的方法【parent::方法名】
May 06 PHP
CI框架简单邮件发送类实例
May 18 PHP
PHP二维数组去重实例分析
Nov 18 PHP
PHP API接口必备之输出json格式数据示例代码
Jun 27 PHP
yii2实现Ueditor百度编辑器的示例代码
Nov 02 #PHP
php 调用百度sms来发送短信的实现示例
Nov 02 #PHP
Linux下 php7安装redis的方法
Nov 01 #PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
Oct 31 #PHP
php图片裁剪函数
Oct 31 #PHP
php+js实现裁剪任意形状图片
Oct 31 #PHP
workerman结合laravel开发在线聊天应用的示例代码
Oct 30 #PHP
You might like
PHP写MySQL数据 实现代码
2009/06/15 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
Jquery动态进行图片缩略的原理及实现
2013/08/13 Javascript
nodejs 整合kindEditor实现图片上传
2015/02/03 NodeJs
javascript获取select标签选中的值
2016/06/04 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
Python实现合并字典的方法
2015/07/07 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
追悼会答谢词
2015/01/05 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
windows server2008 开启端口的实现方法
2022/06/25 Servers