第一步: 搭建上传类基础工作,具体请看://www.jb51.net/article/120242.htm
第二步:建站一个product表,字段id,name,picurl.
第三步:生GII生成PRODUCT 模型,类,视图。
第四步:
main.css 放在frontend\\web\\css
.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}
.one { width: 100%; height: 100% }
main.js 放在 frontend\\web\\assets
$(function(){
$(\'#product-picurl\').click(function(){
$(\'#oneupload\').remove();
$(\'<div>\').appendTo($(\'body\')).attr({\"class\":\"onedialog\",\'id\':\"oneupload\"});
$(\'< >\').appendTo($(\'#oneupload\')).attr({\"src\":\"?r=upload\",\"class\":\"one \"})
});
var v=$(\'#product-picurl\').val();
if(v){
$(\'<img>\').attr({\"src\":v,\"style\":\"height:50px\"}).insertAfter($(\'#product-picurl\'));
}
});
然后在frontend\\assets\\AppAsset.php中注册这两个文件
class AppAsset extends AssetBundle
{
public $ Path = \'@webroot\';
public $ Url = \'@web\';
public $css = [
\'css/site.css\',
\'css/main.css\',
];
public $js = [
\'assets/main.js\'
];
public $depends = [
\'yii\\web\\YiiAsset\',
\'yii\\bootstrap\\BootstrapAsset\',
];
}
UploadController.php
<?PHP
namespace frontend\\controllers;
use Yii;
use yii\\web\\Controller;
use app\\models\\UploadForm;
use yii\\web\\UploadedFile;
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-> Name . \'.\' . $model->file->extension);
$fileName=\'uploads/\' . date(\"YmdHis\") . \'.\' . $model->file->extension;
$model->file->saveAs($fileName);
}
echo \"< src=\'assets/upload.js\'></ >;\";
echo \"< >\";
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 \"</ >\";
}
return $this->render(\'upload\', [\'model\' => $model]);
}
}
?>
UploadForm.php
<?PHP
namespace app\\models;
use yii\\ \\Model;
use yii\\web\\UploadedFile;
/**
* 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
<?php use yii\\widgets\\ActiveForm; ?> <?php $form = ActiveForm::begin([\'options\' => [\'enctype\' => \'multipart/form-data\']]) ?> <?= $form->field($model, \'file\')->fileInput() ?> <button>Submit</button> <?php ActiveForm::end() ?>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
-
华为鸿蒙成第五大操作系统,有希望超过iOS吗?
2026-05-19栏目: 教程
-
先破产再回国 贾跃亭这条路行不通
2026-05-19栏目: 教程
-
圆通速递决战双十一:率先实行涨价策略,其实取胜的关键不在于此
2026-05-19栏目: 教程
-
为什么要拥有一个区块链节点?
2026-05-19栏目: 教程
-
揭秘军运村里的吃、住、行和黑科技!
2026-05-19栏目: 教程
