将 onchange 添加到模板 yii2 fileInput 中的输入答案

【问题标题】：Add onchange to input inside template yii2 fileInput将 onchange 添加到模板 yii2 fileInput 中的输入
【发布时间】：2016-12-07 20:02:57
【问题描述】：

我在 yii2 中使用默认的 yii2 fileInput() 上传文件。代码是：

$form->field($model, 'image', [
       'template' => "<span class='button'>{input}Browse</span><input type='text' placeholder='Include some files' readonly=''>"
       ])->fileInput(['multiple' => false, 'accept' => 'image/* '])->label(false);

这里我使用上面的自定义模板。问题是 {input} 自动生成输入字段，但我想在这个输入中添加一个 onchange 属性。可能吗？任何帮助，将不胜感激。谢谢

【问题讨论】：

嗨，您到底想对onChange 事件做什么？是否与查看此字段或其他内容有关？能否请您提供更多信息？
我想在 onchange 上更改另一个字段的值。
我明白了。我不确定您指的是哪个onChange 事件（文件/字段/值更改？），所以我根据第一个检测到的同名事件编写。我希望它会有所帮助。

标签： php yii2

【解决方案1】：

您可以随意更改，但更可靠、更快捷的方法是使用FileInput Widget by Kartik。您必须先安装它。为此，请在 composer 或 bash 命令行中编写此命令：composer require "kartik-v/yii2-widget-fileinput": "*" 并在安装后不要忘记通过在项目 .php 文件中编写 use kartik\file\FileInput; 来使用它。

然后你可以看到all possible plugin events（有很多）。其中描述的第一个事件是change （“当通过文件浏览按钮在文件输入中选择单个文件或多个文件时触发此事件”）。

要初始化插件事件，请使用以下内容：

echo $form->field($model, 'attribute', [
    'template' => "<span class='button'>{input}Browse</span><input type='text' placeholder='Include some files' readonly=''>"])->widget(FileInput::classname(),
     [
        'options' => ['multiple' => false, 'accept' => 'image/*'],
        'pluginEvents' => [
            'change' => 'function(event) {
                alert("File changed");
            }'
        ]
    ])->label(false);

现在您可以在 alert("File changed"); 所在的行中编写 JavaScript/jQuery Closure 函数。推荐使用它，因为它为您提供了足够的选择和更快的开发速度。

【讨论】：

'pluginEvents' => ，错过了 '>' 字符。顺便说一句，它有效！谢谢
补充了缺失的大于号。抱歉，我忘了对编辑发表评论。而是在这里评论。