How to upload pictures in yii2

The first step: Build the basic work of uploading. For details, please see: http://www.yiichina.com/tutorial/328

The second step: Build the website A product table with fields id, name, picurl.

Step 3: GII generates PRODUCT models, classes, and views.

Step 4:

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 is placed in frontend\web\assets

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

Then register these two files in 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, &#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]);
    }
}
?>

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 [
            [[&#39;file&#39;], &#39;file&#39;],
        ];
    }
}
?>

upload.php

<?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() ?>

PHP Chinese website has a large number of free Yii introductory tutorials, everyone is welcome to learn!

The above is the detailed content of How to upload pictures in yii2. For more information, please follow other related articles on the PHP Chinese website!