yii2高级框架怎么使用jquery file upload上传插件

// 视图文件

use kartik\file\FileInput

<?php $form = ActiveForm::begin([

'options' =>['enctype'=>'multipart/form-data'],

])?>

<?php

echo $form->field($model, 'banner_url[]')->label('banner图')->widget(FileInput::classname(), [

'options' =>['multiple' =>true],

'pluginOptions' =>[

// 需要预览的文件格式

'previewFileType' =>'image',

// 预览的文件

'initialPreview' =>['图片1', '图片2', '图片3'],

// 需要展示的图片设置，比如图片的宽度等

'initialPreviewConfig' =>['width' =>'120px'],

// 是否展示预览图

'initialPreviewAsData' =>true,

// 异步上传的接口地址设置

'uploadUrl' =>Url::toRoute(['/goods/async-image']),

// 异步上传需要携带的其他参数，比如商品id等

'uploadExtraData' =>[

'goods_id' =>$id,

],

'uploadAsync' =>true,

// 最少上传的文件个数限制

'minFileCount' =>1,

// 最多上传的文件个数限制

'maxFileCount' =>10,

// 是否显示移除按钮，指input上面的移除按钮，非具体图片上的移除按钮

'showRemove' =>true,

// 是否显示上传按钮，指input上面的上传按钮，非具体图片上的上传按钮

'showUpload' =>true,

//是否显示[选择]按钮,指input上面的[选择]按钮,非具体图片上的上传按钮

'showBrowse' =>true,

// 展示图片区域是否可点击选择多文件

'browseOnZoneClick' =>true,

// 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项

'fileActionSettings' =>[

// 设置具体图片的查看属性为false,默认为true

'showZoom' =>false,

// 设置具体图片的上传属性为true,默认为true

'showUpload' =>true,

// 设置具体图片的移除属性为true,默认为true

'showRemove' =>true,

],

],

// 一些事件行为

'pluginEvents' =>[

// 上传成功后的回调方法，需要的可查看data后再做具体 *** 作，一般不需要设置

"fileuploaded" =>"function (event, data, id, index) {

console.log(data)

}",

],

])

?>

<?php ActiveForm::end()?>

如上所述，基本上都是组件 FileInput的基本属性和设置，我们这里也仅仅罗列了一些常用的属性介绍，如有所需，可查看文档看属性的详细说明。

按照如上所配置，我们预览下效果图

感觉上效果很是可以，在开始写php代码实现之前，我们先在controller中实现 initialPreview和 initialPreviewConfig的配置

假设上面的视图文件是用户展示商品图片的详情页，当前controller是指渲染视图文件的controller，则需要在controller中获取商品关联的图片，用于展示或者说用于商品图片的删除\新增 *** 作。

// 假设商品的图片是 $relationBanners,$id是商品的id

// $relationBanners的数据结构如：

/**

* Array

*(

* [0] =>Array

* (

* [id] =>1484314

* [goods_id] =>1173376

* [banner_url] =>./uploads/20160617/146612713857635322241f2.png

* )

*

*)

*/

$relationBanners = Banner::find()->where(['goods_id' =>$id])->asArray()->all()

// 对商品banner图进行处理

$p1 = $p2 = []

if ($relationBanners) {

foreach ($relationBanners as $k =>$v) {

$p1[$k] = $v['banner_url']

$p2[$k] = [

'url' =>Url::toRoute('/banner/delete'),

'key' =>$v['id'],

]

}

}

$model = new Banner

return $this->render('banner', [

'model' =>$model,

'p1' =>$p1,

'p2' =>$p2,

'id' =>$id

])

你可以看到p1是图片地址的集合，这里用于赋值给initialPreview

p2是一组url和key的集合，这里用于赋值给initialPreviewConfig

其中url是移除图片的请求地址

key是每个图片对应的id

此时我们视图文件中的pluginOptions应该是这样的

'pluginOptions' =>[

// other code

'initialPreview' =>$p1,

'initialPreviewConfig' =>$p2,

// other code

],

注意设置initialPreviewAsData为true哦，不然等会创建图片后，预览图不会显示。

我们在一开始配置文件中配置了uploadUrl，该参数是异步上传的图片地址。

现在看上传界面应该是光秃秃的，我们选择一张图片后效果如上图2所示，

需要提醒的是，每张小图片上的上传是上传对应的小图片，input框（右下角）的上传和移除都是针对所有的图片的 *** 作，一张也是上传，十张也是上传，我们这里只对多图上传的 *** 作做一个必要的说明。

图片上传的地址以及上传需要的额外参数（如商品id）我们都准备好了，额外的参数配置项是uploadExtraData，具体见上面视图文件中的配置。

接着我们看 /goods/async-image 异步上传的程序实现

public function actionAsyncImage ()

{

// 商品ID

$id = Yii::$app->request->post('goods_id')

$p1 = $p2 = []

if (empty($_FILES['Banner']['name']) || empty($_FILES['Banner']['name']['banner_url']) || !$id) {

echo '{}'

return

}

for ($i = 0$i <count($_FILES['Banner']['name']['banner_url'])$i++) {

$url = '/banner/delete'

$imageUrl = ''//调用图片接口上传后返回图片地址

// 图片入库 *** 作，此处不可以批量直接入库，因为后面我们还要把key返回 便于图片的删除

$model = new Banner

$model->goods_id = $id

$model->banner_url = $imageUrl

$key = 0

if ($model->save(false)) {

$key = $model->id

}

// $pathinfo = pathinfo($imageUrl)

// $caption = $pathinfo['basename']

// $size = $_FILES['Banner']['size']['banner_url'][$i]

$p1[$i] = $imageUrl

$p2[$i] = ['url' =>$url, 'key' =>$key]

}

echo json_encode([

'initialPreview' =>$p1,

'initialPreviewConfig' =>$p2,

'append' =>true,

])

return

}

到此，单图和多图上传的工作我们也就完成了。

为了实现图片的删除效果，这里可以先上传两张图片。你可以单张上传也可以多张上传。

上传成功后你可以刷新当前页面，因为一开始我们就在controller中实现了图片的预览工作，所以理应会展示我们已经上传的两张图片。

按照我们的配置，现在的预览图应该是这样的。

不说废话，我们看图片删除的程序（/banner/delete）实现

public function actionDelete ()

{

if ($id = Yii::$app->request->post('key')) {

$model = $this->findModel($id)

$model->delete()

}

Yii::$app->response->format = \yii\web\Response::FORMAT_JSON

return ['success' =>true]

}

1.网站中商品一多，肯定需要一键导入功能，有现在成的第三方插件类PHPExcel，可以直接百度搜索进行下载。

2.里面所用到的文件夹主要是Classes这个文件夹。

3.把Classes文件夹改名为PHPExcel，复制整个文件夹到yii项目中的protected/extensions。

4.在定义的方法中需要用到PHPExcel的地方加上这两句代码

/*静用Yii自身的自动加载方法，使PHPExcel自带的autoload生效*/        Yii::$enableIncludePath=false

     /*引入PHPExcel.php文件*/        Yii::import('application.extensions.PHPExcel.PHPExcel', 1)  

5.最后附上代码，此代码主要针对低版本的excel起效，对excel2007无效，不过大致步骤相同。

前台显示代码

<html><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8"></head><body><form action="./index.php?r=houtai/functions/daoru" method="POST" enctype="multipart/form-data">    <input type="file" name="filename" />    <input type="submit" name="submit" value="sub" /></form></body></html>

控制器代码

/*     * Excel一键导入功能     */

function actionDaoru(){                    /*是否表单提交*/            if(isset($_POST['submit'])){            /*上传excel文件是否成功*/          

$this->upload_file('filename')                        /*文件路径及名称*/            $file=Yii::app()->BasePath."/modules/houtai/data/excels/".$_FILES['filename']['name']            $this->excelToArray($file)                                }                        $this->renderPartial('Daoru')    }

/*     * 表数据转化为数组 excel 低版本excel，不包括excel2007     */  

function ExcelToArray($file){            /*静用Yii自身的自动加载方法，使PHPExcel自带的autoload生效*/  

Yii::$enableIncludePath=false                /*引入PHPExcel.php文件*/        Yii::import('application.extensions.PHPExcel.PHPExcel', 1)                            //echo $file                /*创建对象,针对Excel2003*/        $objReader=PHPExcel_IOFactory::createReader('Excel5')            /*此属性不明，貌似设置为flase也可以*/      

$objReader->setReadDataOnly(true)            /*加载对象路径*/        $objPHPExcel=$objReader->load($file)            /*获取工作表*/        $objWorksheet=$objPHPExcel->getActiveSheet()    //获得当前活动的工作表，即打开默认显示的那张表        //

$objWorksheet=$objPHPExcel->getSheet(0)    //也可以这样获取，读取第一个表,参数0            /*得到总行数*/      

$highestRow=$objWorksheet->getHighestRow()            /*得到总列数*/        $highestColumn=$objWorksheet->getHighestColumn()        $highestColumnIndex=PHPExcel_Cell::columnIndexFromString($highestColumn)            /*取单元数据进数组*/      

$excelData=array()      

for($row=2$row<=$highestRow++$row){            for($col=0$col<=$highestColumnIndex++$col){              

$excelData[$row][]=$objWorksheet->getCellByColumnAndRow($col,$row)->getValue()            }        }                  

print_r($excelData)        exit    }

最后显示的页面是这样子的，导入的excel表中的数据以数组形式显示。

1.Linux下目录复制：本机->远程服务器scp -r /home/shaoxiaohu/test1 [email protected]:/home/test2 #test1为源目录，test2为目标目录，[email protected]为远程服务器的用户名和ip地址。2.Linux下目录复制：远程服务器->本机scp -r [email protected]:/home/test2 /home/shaoxiaohu/test1#[email protected]为远程服务器的用户名和ip地址，test1为源目录，test2为目标目录。注：如果端口号有更改，需在scp 后输入：-P 端口号 （注意是大写，ssh的命令中 -p是小写）

---