首页 > 文章 > php框架 > yii2 怎么上传图片

yii2 怎么上传图片

爱喝马黛茶的安东尼原创: 2019-12-07 16:20:352161浏览

yii2 怎么上传图片

第一步：搭建上传类基础工作，具体请看：http://www.yiichina.com/tutorial/328

第二步：建站一个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();
$('').appendTo($('body')).attr({"class":"onedialog",'id':"oneupload"});
$('&#39;).appendTo($(&#39;#oneupload&#39;)).attr({"src":"?r=upload","class":"oneiframe"})
});
    var v=$(&#39;#product-picurl&#39;).val();
if(v){
$(&#39;<img>&#39;).attr({"src":v,"style":"height:50px"}).insertAfter($(&#39;#product-picurl&#39;));
}
});</pre><p>然后在frontend\assets\AppAsset.php中注册这两个文件</p><pre class="brush:php;toolbar:false">class AppAsset extends AssetBundle
{
    public $basePath = &#39;@webroot&#39;;
    public $baseUrl = &#39;@web&#39;;
    public $css = [
        &#39;css/site.css&#39;,
        &#39;css/main.css&#39;,
    ];
    public $js = [
        &#39;assets/main.js&#39;
    ];
    public $depends = [
        &#39;yii\web\YiiAsset&#39;,
        &#39;yii\bootstrap\BootstrapAsset&#39;,
    ];
}</pre><p><strong>UploadController.php</strong></p><pre class="brush:php;toolbar:false"><?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, &#39;file&#39;);
            if ($model->file && $model->validate()) {
                //$model->file->saveAs(&#39;uploads/&#39; . $model->file->baseName . &#39;.&#39; .$model->
                file->extension); 
                $fileName=&#39;uploads/&#39; . date("YmdHis") . &#39;.&#39; . $model->file->extension;
                $model->file->saveAs($fileName);
            }
            echo "<script src=&#39;assets/upload.js&#39;></script>;";
            echo "<script>";
            echo "var oneinput=parent.document.getElementById(&#39;product-picurl&#39;);";
            echo "parent.document.getElementById(&#39;product-picurl&#39;).value=&#39;".$fileName."&#39;;";
            echo "var oneupload = parent.document.getElementById(&#39;oneupload&#39;);";
            echo "var img = document.createElement(&#39;img&#39;);";
            echo "img.setAttribute(&#39;style&#39;, &#39;height:50px&#39;);";
            echo "img.src =&#39;".$fileName."&#39;;";
            echo "insertAfter(img,oneinput);";
            echo "oneupload.parentNode.removeChild(oneupload)";
            echo "</script>";
        }
        return $this->render(&#39;upload&#39;, [&#39;model&#39; => $model]);
    }
}
?></pre><p><strong>UploadForm.php</strong></p><pre class="brush:php;toolbar:false"><?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 [
            [[&#39;file&#39;], &#39;file&#39;],
        ];
    }
}
?></pre><p><strong>upload.php</strong></p><pre class="brush:php;toolbar:false"><?php
use yii\widgets\ActiveForm;
?>
<?php $form = ActiveForm::begin([&#39;options&#39; => [&#39;enctype&#39; => &#39;multipart/form-data&#39;]]) ?>
<?= $form->field($model, &#39;file&#39;)->fileInput() ?>
<button>Submit</button>
<?php ActiveForm::end() ?></pre><p>PHP中文网，有大量免费的<a href="https://www.php.cn/phpkj/yii/" target="_blank">Yii入门教程</a>，欢迎大家学习！</p></body></html>
<p>以上是yii2 怎么上传图片的详细内容。更多信息请关注PHP中文网其他相关文章！</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">YII</a><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="yii框架如何获取当前url" href="http://m.php.cn/zh/faq/437907.html">yii框架如何获取当前url</a></span><span>下一篇：<a class="dBlack" title="yii1和yii2的区别是什么" href="http://m.php.cn/zh/faq/437909.html">yii1和yii2的区别是什么</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><em><a href="http://m.php.cn/zh/article.html" class="bBlack"><i>查看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh/faq/434590.html" title="yii2写api接口步骤" class="aBlack">yii2写api接口步骤</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/434614.html" title="yii2 hasone怎么用" class="aBlack">yii2 hasone怎么用</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/437903.html" title="yii2 网站出现403错误怎么办" class="aBlack">yii2 网站出现403错误怎么办</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh/faq/437905.html" title="yii2 入口文件找不到怎么办" class="aBlack">yii2 入口文件找不到怎么办</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/zh/"><b class="icon1"></b><p>首页</p></a></li><li><a href="http://m.php.cn/zh/course.html"><b class="icon2"></b><p>课程</p></a></li><li><a href="http://m.php.cn/zh/wenda.html"><b class="icon4"></b><p>问答</p></a></li><li><a href="http://m.php.cn/zh/login"><b class="icon5"></b><p>我的</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/zh/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/zh/"><b class="icon1"></b><span>首页</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/course.html"><b class="icon2"></b><span>课程</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/wenda.html"><b class="icon4"></b><span>问答</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/dic.html"><b class="icon6"></b><span>词典</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/xiazai/"><b class="icon8"></b><span>下载</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh/faq/zt" title="专题"><b class="icon12"></b><span>专题</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/zh/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/zh/" >首页</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/article.html" class="hover">文章</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/wenda.html" >问答</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/course.html" >课程</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/faq/zt" >专题</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/xiazai"  >下载</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/game" >手游</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh/dic.html" >词典</a></div><div class="clear"></div></div></div><div class="langadivs"  ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a  onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan "  href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a  onclick="javascript:setlang('en');" class="language course-right-orders chooselan "  href="javascript:;"><span>English</span><span>（EN）</span></a><a  onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan "  href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a></div></div><script>            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto',
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper

            });
        </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>