使用javascript在yii2中预览图像

<?php
use yii\web\View;
use yii\helpers\Html;

$this->registerJsFile('@web/js/jquery.min.js', ['position' => View::POS_HEAD]);
?>

<?= Html::img('', ['id' => 'preview-image', 'style' => 'max-width: 100%;']) ?>

<?= Html::fileInput('image', null, ['id' => 'image-input']) ?>

$(document).ready(function() {
    $('#image-input').on('change', function(e) {
        var file = e.target.files[0];
        var reader = new FileReader();
        
        reader.onload = function(e) {
            $('#preview-image').attr('src', e.target.result);
        }
        
        reader.readAsDataURL(file);
    });
});