图片上传插件
yoyocmf 2018-12-16 15:01:57

一、单图上传

 

第一种，数据表中有实际字段名：

 

视图文件添加上传表单：

PHP Code复制内容到剪贴板
  1. use common\widgets\uploader\UploadWidget;  
  2.   
  3. <?= $form->field($model, 'titlepic')->widget(UploadWidget::className(), [  
  4.         'url' => '', //可选  
  5.         'showTips' => true, //可选，显示提示文字，默认是  
  6.         'onlyImage'=>true,//可选，是否只允许上传图片类型，默认是  
  7.         'onlyUrl'=>true, //字段保存图片url
  8.         'options' => [  
  9.             'img-width' => '200px', //预览图宽度，可选，默认不限
  10.         ],  
  11.     ]) ?>  

 

 

index.php直接使用：

PHP Code复制内容到剪贴板
  1. <?= GridView::widget([  
  2.     ...,  
  3.     'columns' => [  
  4.         [  
  5.             'attribute' => 'titlepic',  
  6.             'value' => function ($model) {  
  7.                 if ($model->titlepic) {  
  8.                     return Html::img($model->titlepic,  
  9.                         ['class' => 'thumbnail',  
  10.                             'width' => 100]  
  11.                     );  
  12.                 } else {  
  13.                     return "";  
  14.                 }  
  15.             },  
  16.             'format' => 'raw'  
  17.         ],  
  18.           ...  
  19.         ['class' => 'yii\grid\ActionColumn'],  
  20.     ],  
  21. ]); ?>  

 

如果没有model，直接使用，name是必传项，和options的ID：

PHP Code复制内容到剪贴板
  1. echo \common\widgets\uploader\UploadWidget::widget([  
  2.                                 'showTips' => false,  
  3.                                 'onlyUrl' => true,  
  4.                                 "name" => $name . "[value]",//"Project[note][2][value]",  
  5.                                 "value" => $name . "[value]",  
  6.                                 "options" => [  
  7.                                     "id" => "upload_1"  
  8.                                 ]  
  9.                             ]);  

 

 

 

第二种，如果表中没有实际图片字段名

新增rules规则，引入behavior

model中添加：

PHP Code复制内容到剪贴板
  1. use common\modules\attachment\behaviors\UploadBehavior;    
  2. use common\traits\EntityTrait;    
  3.     
  4.     
  5. class ModelName extends \yii\db\ActiveRecord    
  6. {    
  7.     use EntityTrait;    
  8.     
  9.     public function rules()    
  10.     {    
  11.         return [    
  12.             ...,    
  13.             [['titlepic'],'safe'], // 必须要的    
  14.         ];    
  15.     }    
  16.     
  17.     public function attributeLabels()    
  18.     {    
  19.         return [    
  20.             ...,    
  21.             'titlepic' => '标题图片', //这步也可以不要    
  22.         ];    
  23.     }    
  24.     
  25.     public function behaviors()    
  26.     {    
  27.         return [    
  28.             ...,    
  29.             [    
  30.                 'class' => UploadBehavior::className(),    
  31.                 'attribute' => 'titlepic',// 字段名，喜欢什么写什么，不要中文就行,  
  32.                 'multiple' => true, // 是否多图，true为是，去掉这条为false，默认为false，单图上传  
  33.                 'entity' => __CLASS__    
  34.             ],    
  35.         ];    
  36.     }    

 

 

视图文件添加上传表单：

PHP Code复制内容到剪贴板
  1. <?= $form->field($model, 'titlepic')->widget(UploadWidget::className(), [
  2.     'options' => [  
  3.         'img-width' => '200px', //(可选)预览图宽度
  4.     ],  
  5. ]) ?>  

 

index.php展示图片：

PHP Code复制内容到剪贴板
  1. <?php  
  2. echo GridView::widget([  
  3.     'dataProvider' => $dataProvider,  
  4.     'columns' => [  
  5.         ...,  
  6.         [  
  7.             'attribute' => 'titlepic',  
  8.             'label' => '部门图片',  
  9.             'value' => function ($model) {  
  10.                 if($model->titlepic){  
  11.                     return Html::img($model->titlepic->url,  
  12.                         ['class' => 'thumbnail',  
  13.                             'width' => 100]  
  14.                     );  
  15.                 }else{  
  16.                     return "";  
  17.                 }  
  18.             },  
  19.             'format' => 'raw'  
  20.         ],  
  21.           
  22.   
  23.     ],  
  24. ]);  
  25.   
  26. ?>  

 

 

1.png 

 

2.png

 

 

 2、多【文件】上传

model添加rules规则

PHP Code复制内容到剪贴板
  1. use common\modules\attachment\behaviors\UploadBehavior;    
  2. use common\traits\EntityTrait;    
  3.     
  4. class model名称 extends \yii\db\ActiveRecord    
  5. {    
  6.     use EntityTrait;    
  7.     
  8.     public function rules()    
  9.     {    
  10.         return [    
  11.             ...,    
  12.             [['files'],'safe'], //附件    
  13.         ];    
  14.     }    
  15.     
  16.         
  17.     public function attributeLabels()    
  18.     {    
  19.         return [    
  20.             ...,    
  21.             'files' => '附件',    
  22.         ];    
  23.     }    
  24.     
  25.     public function behaviors()    
  26.     {    
  27.         return [    
  28.             ...,    
  29.             [    
  30.                 'class' => UploadBehavior::className(),    
  31.                 'attribute' => 'files',// 字段名，喜欢什么写什么，不要中文就行    
  32.                 'multiple' => true, // 是否多图，true为是，去掉这条为false，默认为false，单图上传    
  33.                 'entity' => __CLASS__    
  34.             ],    
  35.         ];    
  36.     }    

 

 

视图文件表单中添加（template可以省略）：

PHP Code复制内容到剪贴板
  1. <?= $form->field($model, 'farm_pics', [  
  2.     'template' => '{label}<div class="col-sm-8">{input}</div><div class="col-sm-2">{error}</div>',  
  3.     'labelOptions' => ['class' => 'col-sm-2 control-label'],  
  4. ])->widget(\common\widgets\uploader\MultipleWidget::className(), [  
  5.     'onlyImage' => false,   // 是否只允许上传图片，默认true，为false表示支持上传文件  
  6. ]) ?>  

多图二.png

 

 

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model, 'files',[  
  2.     'template' => '{label}<div class="col-sm-10">{input}</div><div class="col-sm-12">{error}</div>',  
  3. ])->widget(UploadWidget::className(), [  
  4.     'onlyImage' => false, // true允许上传图片类型,false允许上传所有类型,默认true  
  5.     'multiple' => true,   // false为单图，true为多图，默认false  
  6. ]) ?>  

 

 

也可以：

PHP Code复制内容到剪贴板
  1. <?= \common\widgets\uploader\MultipleWidget::widget([  
  2.     "name" => "fertilize[0][" . Html::getInputName($model, "record_fertilize_pics") . "]",  
  3.     'onlyImage' => true,  
  4.     'options' => [  
  5.             "value" => $model->record_fertilize_pics?:array()  
  6.     ]  
  7. ]); ?>  

 

或者：

PHP Code复制内容到剪贴板
  1. <?= \common\widgets\uploader\MultipleWidget::widget([  
  2.     "model" => $model,  
  3.     'attribute' => 'record_fertilize_pics',  
  4.     "name" => "fertilize[0][" . Html::getInputName($model, "record_fertilize_pics") . "]",  
  5.     'onlyImage' => true,  
  6. ]); ?>  

 

 

2.png 

1.png

 

PHP Code复制内容到剪贴板
  1. <?= $form->field($model, 'files',[  
  2.     'template' => '{label}<div class="col-sm-10">{input}</div><div class="col-sm-12">{error}</div>',  
  3. ])->widget(UploadWidget::className(), [  
  4.     'onlyImage' => false, // true允许上传图片类型,false允许上传所有类型,默认true  
  5.     'multiple' => true,   // false为单图，true为多图，默认false  
  6.     'maxNumberOfFiles' => 4,    // 允许上传的最大文件数  
  7. ]) ?>  

3.png

4.png

 

三、多图片上传

model中添加：

PHP Code复制内容到剪贴板
  1. use common\modules\attachment\behaviors\UploadBehavior;      
  2. use common\traits\EntityTrait;      
  3.       
  4. class model名称 extends \yii\db\ActiveRecord      
  5. {      
  6.     use EntityTrait;      
  7.       
  8.     public function rules()      
  9.     {      
  10.         return [      
  11.             ...,      
  12.             [['morepic'],'safe'], //多图图集      
  13.         ];      
  14.     }      
  15.       
  16.           
  17.     public function attributeLabels()      
  18.     {      
  19.         return [      
  20.             ...,      
  21.             'morepic' => '多图图集',      
  22.         ];      
  23.     }      
  24.       
  25.     public function behaviors()      
  26.     {      
  27.         return [      
  28.             ...,      
  29.             [  
  30.                 'class' => UploadBehavior::className(),  
  31.                 'attribute' => 'morepic',// 多图图集  
  32.                 'multiple' => true, // 是否多图，true为是，去掉这条为false，默认为false，单图上传  
  33.                 'entity' => __CLASS__  
  34.             ],    
  35.         ];      
  36.     }      

 

视图文件表单中添加（template可以省略）：

PHP Code复制内容到剪贴板
  1. <?= $form->field($model, 'morepic',[  
  2.     'template' => '{label}<div class="col-sm-10">{input}</div><div class="col-sm-12">{error}</div>',  
  3. ])->widget(UploadWidget::className(), [  
  4.     'onlyImage' => true,  // true允许上传图片类型,false允许上传所有类型,默认true  
  5.     'multiple' => true,   // false为单图，true为多图，默认false  
  6.     'maxNumberOfFiles' => 4,    // 允许上传的最大文件数  
  7. ]) ?>  

 

 

 

 

2018.12.27 update ，添加多文件 + 多图上传  

2018.12.20 23:04 update，提示信息添加最大文件提醒

3.png

 

本文来自于：http://www.yoyo88.cn/note/yoyocmf/395.html

上一篇 main-local本地配置gii + debug
下一篇 列表树组件/ztree
相关的文章
Powered by yoyo苏ICP备15045725号