So laden Sie Bilder in yii2 hoch

Schritt 1: Erstellen Sie die grundlegende Arbeit zum Hochladen. Weitere Informationen finden Sie unter: http://www.yiichina.com/tutorial/328

Schritt 2: Erstellen Sie auf der Website eine Produkttabelle mit den Feldern ID, Name und Bild.

Schritt 3: GII generiert PRODUKT-Modelle, -Klassen und -Ansichten.

Schritt 4: Platzieren Sie

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 auf frontendwebassets

$(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>&#39;).attr({"src":v,"style":"height:50px"}).insertAfter($(&#39;#product-picurl&#39;));
}
});

und registrieren Sie diese beiden Dateien dann in frontendassetsAppAsset.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 Chinesische Website, Es gibt Viele kostenlose Yii-Einführungs-Tutorials, zum Lernen ist jeder herzlich willkommen!

Das obige ist der detaillierte Inhalt vonSo laden Sie Bilder in yii2 hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!