How to use uploadify in yii2

Uploadify is an excellent jQuery plug-in from abroad. Its main function is to upload files in batches.

To download the Uploadify control, you can find it on the git website and find the one that suits you. .For example, the one we use below is downloaded from

https://github.com/xjflyttp/yii2-uploadify-widget, which also has detailed operation documents. (Recommended learning: yii tutorial)

① Configure composer.json (it exists in the root directory of the website), find require, and then add our uploadify

"require": {
"php": ">=5.4.0",
"yiisoft/yii2": ">=2.0.6",
"yiisoft/yii2-bootstrap": "*",
"yiisoft/yii2-swiftmailer": "*",
"xj/yii2-uploadify-widget": "~2.0.0" //这里是新添加的
},

② Utilize Composer downloads yii2-uploadify-widget to our website, opens and runs the command line in the root directory of the website, and waits for downloading as shown in the figure:

##③ View processing

<?php
use yii\web\JsExpression;
//外部TAG
echo Html::fileInput(&#39;test&#39;, NULL, [&#39;id&#39; => &#39;test&#39;]);
echo Uploadify::widget([
    &#39;url&#39; => yii\helpers\Url::to([&#39;s-upload&#39;]),
    &#39;id&#39; => &#39;test&#39;, //需要跟上fileInput 的id 对应
    &#39;csrf&#39; => true,
    &#39;renderTag&#39; => false,
     &#39;jsOptions&#39; => [
                  &#39;width&#39; => 100,
                  &#39;height&#39; => 40,
                  &#39;onUploadError&#39; => new JsExpression(<<<EOF
                  function(file, errorCode, errorMsg, errorString) {
                        console.log(&#39;The file &#39; + file.name + &#39; could not be uploaded: &#39; + errorString + errorCode + errorMsg);
                    }
EOF
                    ),
                    &#39;onUploadSuccess&#39; => new JsExpression(<<<EOF
                    function(file, data, response) {
                        data = JSON.parse(data);
                        if (data.error) {
                            console.log(data.msg);
                             } else {
                                //在此处理你的图片
                               console.log(data.fileUrl);
                        }
                    }
EOF

④ Configure Controller layer

<?php
namespace \backend\controllers;
use xj\uploadify\UploadAction;
class TestController extends \yii\web\Controller
{
   public function actions() {
    return [
        &#39;s-upload&#39; => [
            &#39;class&#39; => UploadAction::className(),
            //磁盘目录
            &#39;basePath&#39; => &#39;@webroot/upload&#39;,
            //访问目录
            &#39;baseUrl&#39; => &#39;@web/upload&#39;,
            //防止跨站攻击
            &#39;enableCsrf&#39; => true, // default
            &#39;postFieldName&#39; => &#39;Filedata&#39;, // default
            //BEGIN METHOD
            &#39;format&#39; => [$this, &#39;methodName&#39;],
            //END METHOD
            //BEGIN CLOSURE BY-HASH
            //是否覆盖相同文件
            &#39;overwriteIfExist&#39; => true,
            //创建图片名称
            &#39;format&#39; => function (UploadAction $action) {
                $fileext = $action->uploadfile->getExtension();
                $filename = sha1_file($action->uploadfile->tempName);
                return "{$filename}.{$fileext}";
            },
             //想要多调用这个函数
            &#39;format&#39; => function (UploadAction $action) {
                $fileext = $action->uploadfile->getExtension();
                $filehash = sha1(uniqid() . time());
                $p1 = substr($filehash, 0, 2);
                $p2 = substr($filehash, 2, 2);
                return "{$p1}/{$p2}/{$filehash}.{$fileext}";
            },
            */
            &#39;validateOptions&#39; => [
                &#39;extensions&#39; => [&#39;jpg&#39;, &#39;png&#39;], //后缀验证
                &#39;maxSize&#39; => 1 * 1024 * 1024, //上传大小限制
             ],
             //验证前处理
            &#39;beforeValidate&#39; => function (UploadAction $action) {
                //throw new Exception(&#39;test error&#39;);
                },
             //验证后处理
            &#39;afterValidate&#39; => function (UploadAction $action) {},
             //保存前处理
            &#39;beforeSave&#39; => function (UploadAction $action) {},
            //保存后处理
            &#39;afterSave&#39; => function (UploadAction $action) {
                //$action->output 返回给浏览器的数据
                //返回Url 图片返回的路径
                //$action->getWebUrl()
                //图片的名称
                //$action->getFilename();
                //保存图片的物理位置
                //$action->getSavePath();
                //输出                                 
                //$action->output[&#39;fileUrl&#39;] = $action->getWebUrl();
                //$action->output[&#39;fileName&#39;] = $action->getFilename();
                //$action->output[&#39;filePath&#39;] = $action->getSavePath();
                //$action->getFilename(); // "image/yyyymmddtimerand.jpg"
                //$action->getWebUrl(); //  "baseUrl + filename, /upload/image/yyyymmddtimerand.jpg"
                 //$action->getSavePath(); // "/var/www/htdocs/upload/image/yyyymmddtimerand.jpg"
                $action->output[‘fileUrl’] = $action->getWebUrl()
              },
           ],
        ];
     }
   }
?>

The above is the detailed content of How to use uploadify in yii2. For more information, please follow other related articles on the PHP Chinese website!