Yii2 uploadify ajax上传图片 上传多图、单图

UploadifyAction.php  路径：backend\controllers\test\UploadifyAction.php

<?php  
namespace backend\controllers\test;  

use Yii;
use yii\web\Controller;
use yii\web\NotFoundHttpException;
use backend\models\Model;  
use yii\web\UploadedFile;
use yii\helpers\Json;

class UploadifyAction extends \yii\base\Action {  
    public function run() {  
        return $this->controller->render('uploadify');
    }  
}  

uploadify.php  路径：backend\views\test\uploadify.php

<pre name="code" class="php"><?php
$this->registerJsFile('res/js/jquery.uploadify.min.js', ['depends' => 'yii\web\YiiAsset']);
?>
<link rel="stylesheet" type="text/css" href="res/css/uploadify.css">
<form>
    <input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
<input type="text" id ="tu">
<?php
$csrfParam = Yii::$app->request->csrfParam;
$csrfToken = Yii::$app->request->csrfToken;
$uploadUrl = Yii::$app->urlManager->createUrl('/test/upload');
$this->registerJs("
    $('#file_upload').uploadify({
        'debug'    : true,
        'multi'    : false,单图和多图参数设置
        'height'   : 50,
        'width'    :150,
        'buttonText': '上传图片',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'formData': {
            '{$csrfParam}': '{$csrfToken}',
        },
        'swf': 'res/js/uploadify.swf',
        'uploader': '{$uploadUrl}',
        'onUploadSuccess' : function(file, data, response) {
            $('#tu').val(data);
             console.log(data);
             var dataObj = eval('('+data+')');
             console.log(dataObj);
        },
        
    });
");
?>

TestController.php 路径： backend\controllers\TestController.php

<?php
namespace backend\controllers;

use Yii;
use yii\filters\AccessControl;
use yii\web\Controller;
use common\models\LoginForm;
use yii\filters\VerbFilter;

/**
 * Site controller
 */
class TestController extends Controller
{
     public function actions() {  
        return [   
                'uploadify' => [   
                        'class' => 'backend\controllers\test\UploadifyAction',
                ],
                'upload' => [   
                        'class' => 'backend\controllers\test\UploadAction',
                ],
         ];
     }
 }

UploadAction.php 路径： backend\controllers\test\uploadAction.php

<?php  
namespace backend\controllers\test;  

use Yii;
use yii\web\Controller;
use yii\base\Exception;
use yii\helpers\Json;
use yii\helpers\FileHelper;

class UploadAction extends \yii\base\Action {  
    public function run(){
        $targetFolder = \Yii::$app->basePath.'/web/Uploads/'.date('Y/md'); 
        $file = new \yii\helpers\FileHelper();
        $file->createDirectory($targetFolder);
        if (!empty($_FILES)) {
            $tempFile = $_FILES['Filedata']['tmp_name'];
            $fileParts = pathinfo($_FILES['Filedata']['name']);
            $extension = $fileParts['extension'];
            $random = time() . rand(1000, 9999);
            $randName = $random . "." . $extension;
            $targetFile = rtrim($targetFolder,'/') . '/' . $randName;
            $fileTypes = array('jpg','jpeg','gif','png'); 
            $uploadfile_path = 'Uploads/'.date('Y/md').'/'.$randName;
            $callback['url'] = $uploadfile_path;
            $callback['filename'] = $fileParts['filename'];
            $callback['randName'] = $random;
            if (in_array($fileParts['extension'],$fileTypes)) {
                move_uploaded_file($tempFile,$targetFile);
                echo json_encode($callback);
            } else {
                echo '不能上传后缀为'.$fileParts['extension'].'文件';
            }
        }else{
            echo "没有上传文件";
        }       
    }
}  

 

uploadify.swf 放在backend/web/res/js/uploadify.swf 

uploadify.css 放在backend/web/res/css/uploadify.css

jquery.uploadify.min.js 放在 backend/web/res/js/jquery.uploadify.min.js

 

视图里面就用到 uploadify.swf 、uploadify.css 、jquery.uploadify.min.js 这三个外部资源文件

单图和多图就是一个参数设置的：'multi'    : false,

swf文件位置一定要对，如果有问题可以发Email给我 wenziyelang@foxmail.com

 

uploadify 官网：http://www.uploadify.com/

uploadify   下载地址    www.uploadify.com/wp-content/uploads/files/uploadify.zip

uploadify 文档   http://www.uploadify.com/documentation/

uploadify demo  http://www.uploadify.com/demos/