yii2 上传图片的示例代码

第一步: 搭建上传类基础工作,具体请看://www.jb51.net/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() ?>

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

(0)

相关推荐

  • yii2利用自带UploadedFile实现上传图片的示例

    本人搜索了很多关于yii2利用自带UploadedFile实现上传图片介绍,下面我来记录一下. 创建一个 models/UploadForm.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 Uploa

  • Yii2实现ajax上传图片插件用法

    本文实例讲述了Yii2实现ajax上传图片插件用法.分享给大家供大家参考,具体如下: 这里需要先下载 mdmsoft/yii2-upload-file.插件. 代码如下: public function actionCreate() { $model = new DynamicModel([ 'nama', 'file_id' ]); // behavior untuk upload file $model->attachBehavior('upload', [ 'class' => 'mdm

  • Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例

    之前从没接触过Yii,借助的各方资源来做的这个整合阿里云OSS的SDK上传图片实例,如果有不正之处请指出! 前面参照了weinirumo 的介绍,大家可以自行去查看. 好了,下面开始进入主题: 准备工作:需要使用composer执行命令,如果没有安装composer的需要提前安装,参考文档:composer安装流程 1.项目目录结构 我使用的是基础版,只有后台目录,请自行对照自己的项目目录结构,会用到以下的几个目录: 2.在项目根目录下运行cmd命令 3.执行composer命令 切换到中国国内

  • yii2 上传图片的示例代码

    第一步: 搭建上传类基础工作,具体请看://www.jb51.net/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;borde

  • C#调用HTTP POST请求上传图片的示例代码

    现在很多B/S系统的开发都是通过API方式来进行的,一般服务端会开放一个API接口,客户端调用API接口来实现图片或文件上传的功能. GET和POST是什么?HTTP协议中的两种发送请求的方法. HTTP是什么?HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议. HTTP的底层是TCP/IP.所以GET和POST的底层也是TCP/IP,也就是说,GET/POST都是TCP链接.GET和POST能做的事情是一样一样的.你要给GET加上request body,给POST带上url参

  • SpringMVC框架实现上传图片的示例代码

    一.创建图片虚拟目录 在上传图片之前,先要设置虚拟目录(以IDEA为例) 打开工具栏的运行配置Edit Configurations 添加物理目录和并设置虚拟目录路径 添加img图片在img文件夹内 测试访问:http://localhost:8080/img/img.jpg 二.SpringMVC上传头像 1.SpringMVC对多部件类型的解析 上传图片SpringMVC.xml配置 在页面form中提交enctype="multipart/form-data"的数据时,需要spr

  • 使用iView Upload 组件实现手动上传图片的示例代码

    在过去,浏览器是不允许我们读取本地的文件,包括图片.因此,当我们需要预览一个图片的时候,往往先将它传送到服务端,然后服务端返回一个访问 url 地址,达到预览图片的功能.如今,随着标准不断的改善,JavaScript 里的 API 越来越多,我们可以通过直接读取本地文件的方式来加载我们想要看到的文本或者图片,一定程度上减少了服务端的压力. Upload 组件参考文档:https://www.iviewui.com/components/upload 文档提供的参考代码: <template>

  • vue中el-upload上传图片到七牛的示例代码

    一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload

  • nodejs 图片预览和上传的示例代码

    本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言 一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操

  • React Native使用fetch实现图片上传的示例代码

    本文介绍了React Native使用fetch实现图片上传的示例代码,分享给大家,具体如下: 普通网络请求参数是JSON对象 图片上传的请求参数使用的是formData对象 使用fetch上传图片代码封装如下: let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现图片上传 * @param {string} url 接口地址 * @param {J

  • vue中实现图片和文件上传的示例代码

    html页面 <input type="file" value="" id="file" @change='onUpload'>//注意不能带括号 js代码 methods: { //上传图片 onUpload(e){ var formData = new FormData(); f ormData.append('file', e.target.files[0]); formData.append('type', 'test');

  • Flask实现图片的上传、下载及展示示例代码

    用Flask处理图片非常容易,这一篇学习一下图片的上传.下载及展示.还是以实例代码演示为主. 首先,实现一个简单的上传(过程中未做任何处理,只是为了演示) 点击选择图片,输入李四: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

  • vue+element 实现商城主题开发的示例代码

    本文介绍了vue+element 实现商城主题开发的示例代码,分享给大家,具体如下: <template> <div> <div class="set-phone"> <el-form :model="theme" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item lab

随机推荐