yii2 上传图片的示例代码

2023-09-06 07:59:05 157

第一步：搭建上传类基础工作，具体请看：//www.nhooo.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:5px2px6px#000;border:2pxsolid#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"});
$('').appendTo($('#oneupload')).attr({"src":"?r=upload","class":"oneiframe"})
});
varv=$('#product-picurl').val();
if(v){
$('<img>').attr({"src":v,"style":"height:50px"}).insertAfter($('#product-picurl'));
}
});
</pre>
<p>然后在frontend\assets\AppAsset.php中注册这两个文件</p>
<pre>
classAppAssetextendsAssetBundle
{
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',
];
}
</pre>
<p>UploadController.php</p>
<pre>
<?PHP
namespacefrontend\controllers;

useYii;
useyii\web\Controller;
useapp\models\UploadForm;
useyii\web\UploadedFile;

classUploadControllerextendsController
{
publicfunctionactionIndex()
{
$model=newUploadForm();

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"<scriptsrc='assets/upload.js'></script>;";
echo"<script>";
echo"varoneinput=parent.document.getElementById('product-picurl');";
echo"parent.document.getElementById('product-picurl').value='".$fileName."';";
echo"varoneupload=parent.document.getElementById('oneupload');";
echo"varimg=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]);
}
}
?>

</pre>
<p>UploadForm.php</p>
<pre>
<?PHP
namespaceapp\models;

useyii\base\Model;
useyii\web\UploadedFile;

/**
*UploadFormisthemodelbehindtheuploadform.
*/
classUploadFormextendsModel
{
/**
*@varUploadedFilefileattribute
*/
public$file;

/**
*@returnarraythevalidationrules.
*/
publicfunctionrules()
{
return[
[['file'],'file'],
];
}
}
?>

</pre>
<p>upload.php</p>
<pre>
<?php
useyii\widgets\ActiveForm;
?>

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

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

<button>Submit</button>

<?phpActiveForm::end()?>

</pre>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。</p></section>
                </div>
            </div>
            <!--文章阅读上下按钮-->  
            <nav>
                                    <span class="meta-nav"><a href="/article/201819.html" title="mysql5.7及mysql 8.0版本修改root密码的方法小结" se_prerender_url="complete">上一篇<br>mysql5.7及mysql 8.0版本修改root密码的方法小结</a></span>
                
                                    <span class="meta-nav"><a href="/article/201816.html" title="关于AIX挂载NFS写入效率低效的解决方法" se_prerender_url="complete">下一篇<br>关于AIX挂载NFS写入效率低效的解决方法</a></span>
                            <div class="clear"></div>
            </nav>
            <!-- 文章推荐 -->
            <div class="article-recommend">         
                <h3>热门推荐</h3> 
                                        <div class="title"><span class="s-1">1</span> <a href="/article/10835.html" title="毛坯房验收经验和常识 看了之后再验房心里有底">毛坯房验收经验和常识 看了之后再验房心里有底</a></div>  
                                        <div class="title"><span class="s-2">2</span> <a href="/article/10697.html" title="二手房收房如何交接 二手房收房注意问题">二手房收房如何交接 二手房收房注意问题</a></div>  
                                        <div class="title"><span class="s-3">3</span> <a href="/article/10605.html" title="专业验收毛坯房的价格 商品房验收合格的标准">专业验收毛坯房的价格 商品房验收合格的标准</a></div>  
                                        <div class="title"><span class="s-4">4</span> <a href="/article/10568.html" title="精装房怎么验收 精装房请验房师有用吗">精装房怎么验收 精装房请验房师有用吗</a></div>  
                                        <div class="title"><span class="s-5">5</span> <a href="/article/10567.html" title="一般要到哪里找验房师 验房师有哪些作用呢">一般要到哪里找验房师 验房师有哪些作用呢</a></div>  
                                        <div class="title"><span class="s-6">6</span> <a href="/article/10566.html" title="请人验房一般是多少钱 验房师费用是多少">请人验房一般是多少钱 验房师费用是多少</a></div>  
                                        <div class="title"><span class="s-7">7</span> <a href="/article/10553.html" title="怎样测量房子面积 建筑面积和使用面积怎么算">怎样测量房子面积 建筑面积和使用面积怎么算</a></div>  
                                        <div class="title"><span class="s-8">8</span> <a href="/article/10550.html" title="收房需要注意什么 仔细检查不松懈">收房需要注意什么 仔细检查不松懈</a></div>  
                                        <div class="title"><span class="s-9">9</span> <a href="/article/10548.html" title="收房时三书一证一表是什么 主要作用介绍">收房时三书一证一表是什么 主要作用介绍</a></div>  
                                        <div class="title"><span class="s-10">10</span> <a href="/article/10547.html" title="交房时交房税费有哪些 本文为你一一讲解">交房时交房税费有哪些 本文为你一一讲解</a></div>  
                                        <div class="title"><span class="s-11">11</span> <a href="/article/10526.html" title="验房都需要验什么 要做哪些准备呢">验房都需要验什么 要做哪些准备呢</a></div>  
                                        <div class="title"><span class="s-12">12</span> <a href="/article/10525.html" title="毛坯房验房师有必要请吗 毛坯房装修完如何验收">毛坯房验房师有必要请吗 毛坯房装修完如何验收</a></div>  
                                        <div class="title"><span class="s-13">13</span> <a href="/article/7820.html" title="地下室防水工程质量验收规范详解">地下室防水工程质量验收规范详解</a></div>  
                                        <div class="title"><span class="s-14">14</span> <a href="/article/4947.html" title="水性涂料、油性涂料区别介绍">水性涂料、油性涂料区别介绍</a></div>  
                                        <div class="title"><span class="s-15">15</span> <a href="/article/4517.html" title="零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包">零基础布艺DIY工坊 教你做超萌猫头鹰钥匙包</a></div>  
                                        <div class="title"><span class="s-16">16</span> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a></div>  
                                        <div class="title"><span class="s-17">17</span> <a href="/article/4258.html" title="家庭“装修套餐”中猫腻你知道吗？">家庭“装修套餐”中猫腻你知道吗？</a></div>  
                                        <div class="title"><span class="s-18">18</span> <a href="/article/4051.html" title="小空间大浴望 卫浴间装修巧支招">小空间大浴望 卫浴间装修巧支招</a></div>  
                     
            </div>
            <div class="add-gg">
                <!-- 文章内页广告 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-4387516810452807"
                     data-ad-slot="9131157744"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </div>
        <!--侧边栏-->
        <div id="sidebar">
            <li class="sidebar-box">
                <h3 class="widget-title">随机推荐</h3>
                <ul>
                                            <li>
                            <a href="/article/358319.html" title="老天师说过的经典语录">老天师说过的经典语录</a>
                        </li>
                                            <li>
                            <a href="/article/354737.html" title="文艺情感经典句子">文艺情感经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354736.html" title="视频分享经典句子">视频分享经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354734.html" title="夸赞女生句子经典">夸赞女生句子经典</a>
                        </li>
                                            <li>
                            <a href="/article/354733.html" title="夸赞女生经典句子">夸赞女生经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354732.html" title="共创未来经典句子">共创未来经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354731.html" title="红岩经典的句子">红岩经典的句子</a>
                        </li>
                                            <li>
                            <a href="/article/354730.html" title="贬低别人经典句子">贬低别人经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354728.html" title="宽恕别人经典句子">宽恕别人经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354727.html" title="暗恋最经典句子">暗恋最经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354726.html" title="寒衣节经典句子">寒衣节经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354725.html" title="逆境向上经典句子">逆境向上经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354724.html" title="作文励志经典句子">作文励志经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354723.html" title="土的经典句子">土的经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354722.html" title="拉车式经典句子">拉车式经典句子</a>
                        </li>
                                            <li>
                            <a href="/article/354721.html" title="火锅经典搞笑句子">火锅经典搞笑句子</a>
                        </li>
                                    </ul>
            </li>
            <li class="sidebar-box">

                 <!-- google文章侧边 -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-4387516810452807"
                     data-ad-slot="8604338277"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </li>
        </div>
    </div>
</div>

<ul class="suspend">
    <li class="back-top" onclick="backTop()">
        <i class="fa fa-chevron-up"></i>
        <span class="more">返回顶部</span>
    </li>
    <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=3162201930&site=qq&menu=yes">
            <i class="fa fa-qq"></i>
            <span class="more">3162201930</span>
        </a>
    </li>
    <li>
        <a href="mailto:czq8825@qq.com">
            <i class="fa fa-envelope"></i>
            <span class="more">czq8825@qq.com</span>
        </a>
    </li>
<!--     <li>
        <i class="fa fa-weixin"></i>
        <span class="more weixin"><img src="https://www.haoziyuan.cc/Uploads/20210427/6087c019e1f1f.jpg" alt="微信二维码"></span>
    </li> -->
</ul>

<footer class="footer clearfix">
    <p>免责声明：网站资源来源于网络，如有侵权，请及时联系删除。</p>
    <p>Copyright © 2024 <a href="/">微客导航网</a>. All Rights Reserved.</p>
    <p>
        <a href="https://beian.miit.gov.cn">蜀ICP备2021004611号-4</a>
        <a href="/sitemap.html">网站地图</a>
        <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?78e2f1027b3a17750580941ea594d61e";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>    </p>
</footer>
<script src="/Public/Home/js/main.js"></script>
<script type="text/javascript" src="/Public/Home/js/z_stat.js"></script>
</body>
</html>