demo 2015-12-05 2038次浏览

1、下载bootstrap-fileinput,下载地址:https://github.com/kartik-v/bootstrap-fileinput

2、将其放入项目的静态资源目录内。

3、在需要使用的页面注册css和js,代码如下:

<?php

use frontend\assets\AppAsset; 
AppAsset::register($this);
$this->registerCssFile('@web/statics/inputfile/css/fileinput.css',['depends'=>['frontend\assets\AppAsset']]); 
$this->registerJsFile('@web/statics/inputfile/js/fileinput.js',['depends'=>['frontend\assets\AppAsset']]);
$this->registerJsFile('@web/statics/inputfile/js/fileinput_locale_zh.js',['depends'=>['frontend\assets\AppAsset']]);
$this->registerJs("$('#file-0').fileinput({
	        'allowedFileExtensions' : ['jpg', 'png','gif'],'showCaption':false,
	    });");
?>

4、在form表单中使用:

<?php $form = ActiveForm::begin(['id' => 'form-user-upload','options'=>['class'=>'form-horizontal','role'=>"form"],'fieldConfig' => [
                'template' => "<div class=\"col-sm-9\">{input}</div>",
            ]]);  ?>
	<?= $form->field($model, 'user_image')->input('file',['class'=>'file','id'=>'file-0']) ?>
<?php ActiveForm::end(); ?>

5、效果图如下:

blob.png