这篇文章主要介绍了yii2 上传图片的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧。

第一步： 搭建上传类基础工作

第二步：建站一个product表，字段id,name,picurl.

第三步：生GII生成PRODUCT 模型，类，视图。

第四步：

main.css 放在frontend\web\css

1. .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} 
2. .oneiframe{ width: 100%; height: 100% } 

main.js 放在 frontend\web\assets

1. $(function(){ 
2.  $('#product-picurl').click(function(){ 
3.  $('#oneupload').remove(); 
4.  $('<div>').appendTo($('body')).attr({"class":"onedialog",'id':"oneupload"}); 
5.  $('<iframe>').appendTo($('#oneupload')).attr({"src":"?r=upload","class":"oneiframe"}) 
6.  }); 
7.   var v=$('#product-picurl').val(); 
8.  if(v){ 
9.  $('<img>').attr({"src":v,"style":"height:50px"}).insertAfter($('#product-picurl')); 
10.  } 
11. }); 

然后在frontend\assets\AppAsset.php中注册这两个文件

1. class AppAsset extends AssetBundle 
2. { 
3.   public $basePath = '@webroot'; 
4.   public $baseUrl = '@web'; 
5.   public $css = [ 
6.     'css/site.css', 
7.     'css/main.css', 
8.   ]; 
9.   public $js = [ 
10.     'assets/main.js' 
11.   ]; 
12.   public $depends = [ 
13.     'yii\web\YiiAsset', 
14.     'yii\bootstrap\BootstrapAsset', 
15.   ]; 
16. } 

UploadController.php

1. <?PHP 
2. namespace frontend\controllers; 
3.  
4. use Yii; 
5. use yii\web\Controller; 
6. use app\models\UploadForm; 
7. use yii\web\UploadedFile; 
8.  
9. class UploadController extends Controller 
10. { 
11.   public function actionIndex() 
12.   { 
13.     $model = new UploadForm(); 
14.  
15.     if (Yii::$app->request->isPost) { 
16.       $model->file = UploadedFile::getInstance($model, 'file'); 
17.  
18.       if ($model->file && $model->validate()) { 
19.         //$model->file->saveAs('uploads/' . $model->file->baseName . '.' . $model->file->extension);       
20.         $fileName='uploads/' . date("YmdHis") . '.' . $model->file->extension; 
21.         $model->file->saveAs($fileName); 
22.       } 
23.       echo "<script src='assets/upload.js'></script>;"; 
24.       echo "<script>"; 
25.       echo "var oneinput=parent.document.getElementById('product-picurl');"; 
26.       echo "parent.document.getElementById('product-picurl').value='".$fileName."';"; 
27.       echo "var oneupload = parent.document.getElementById('oneupload');"; 
28.       echo "var img = document.createElement('img');"; 
29.       echo "img.setAttribute('style', 'height:50px');"; 
30.       echo "img.src ='".$fileName."';"; 
31.       echo "insertAfter(img,oneinput);"; 
32.       echo "oneupload.parentNode.removeChild(oneupload)"; 
33.       echo "</script>"; 
34.     } 
35.  
36.     return $this->render('upload', ['model' => $model]); 
37.   } 
38. } 
39. ?> 

UploadForm.php

1. <?PHP 
2. namespace app\models; 
3.  
4. use yii\base\Model; 
5. use yii\web\UploadedFile; 
6.  
7. /** 
8.  * UploadForm is the model behind the upload form. 
9.  */ 
10. class UploadForm extends Model 
11. { 
12.   /** 
13.    * @var UploadedFile file attribute 
14.    */ 
15.   public $file; 
16.  
17.   /** 
18.    * @return array the validation rules. 
19.    */ 
20.   public function rules() 
21.   { 
22.     return [ 
23.       [['file'], 'file'], 
24.     ]; 
25.   } 
26. } 
27. ?> 

upload.php

1. <?php 
2. use yii\widgets\ActiveForm; 
3. ?> 
4.  
5. <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]) ?> 
6.  
7. <?= $form->field($model, 'file')->fileInput() ?> 
8.  
9. <button>Submit</button> 
10.  
11. <?php ActiveForm::end() ?>

Tags: yii2上传图片

分享到：