yii2 上传图片的示例代码

第一步： 搭建上传类基础工作，具体请看：//www.rzxsoft.cn/article/120242.htm

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

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

第四步：

main.css 放在frontendwebcss

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

main.js 放在 frontendwebassets

$(function(){ $("#product-picurl").click(function(){ $("#oneupload").remove(); $("<div>").appendTo($("body")).attr({"class":"onedialog","id":"oneupload"}); $("<iframe>").appendTo($("#oneupload")).attr({"src":"?r=upload","class":"oneiframe"}) });  var v=$("#product-picurl").val(); if(v){ $("<img>").attr({"src":v,"style":"height:50px"}).insertAfter($("#product-picurl")); }});

然后在frontendassetsAppAsset.php中注册这两个文件

class AppAsset extends AssetBundle{  public $basePath = "@webroot";  public $baseUrl = "@web";  public $css = [    "css/site.css",    "css/main.css",  ];  public $js = [    "assets/main.js"  ];  public $depends = [    "yiiwebYiiAsset",    "yiiootstrapBootstrapAsset",  ];}

UploadController.php

<?PHPnamespace frontendcontrollers;use Yii;use yiiwebController;use appmodelsUploadForm;use yiiwebUploadedFile;class UploadController extends Controller{  public function actionIndex()  {    $model = new UploadForm();    if (Yii::$app->request->isPost) {      $model->file = UploadedFile::getInstance($model, "file");      if ($model->file && $model->validate()) {        //$model->file->saveAs("uploads/" . $model->file->baseName . "." . $model->file->extension);              $fileName="uploads/" . date("YmdHis") . "." . $model->file->extension;        $model->file->saveAs($fileName);      }      echo "<script src="assets/upload.js"></script>;";      echo "<script>";      echo "var oneinput=parent.document.getElementById("product-picurl");";      echo "parent.document.getElementById("product-picurl").value="".$fileName."";";      echo "var oneupload = parent.document.getElementById("oneupload");";      echo "var img = document.createElement("img");";      echo "img.setAttribute("style", "height:50px");";      echo "img.src ="".$fileName."";";      echo "insertAfter(img,oneinput);";      echo "oneupload.parentNode.removeChild(oneupload)";      echo "</script>";    }    return $this->render("upload", ["model" => $model]);  }}?>

UploadForm.php

<?PHPnamespace appmodels;use yiiaseModel;use yiiwebUploadedFile;/** * UploadForm is the model behind the upload form. */class UploadForm extends Model{  /**   * @var UploadedFile file attribute   */  public $file;  /**   * @return array the validation rules.   */  public function rules()  {    return [      [["file"], "file"],    ];  }}?>

upload.php

<?phpuse yiiwidgetsActiveForm;?><?php $form = ActiveForm::begin(["options" => ["enctype" => "multipart/form-data"]]) ?><?= $form->field($model, "file")->fileInput() ?><button>Submit</button><?php ActiveForm::end() ?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持网页设计。