Yii php ajax实现异步上传图片

最新推荐文章于 2019-04-07 10:37:55 发布

醉品人生

最新推荐文章于 2019-04-07 10:37:55 发布

阅读量232

点赞数

分类专栏： JS Jquery Yii PHP基础文章标签： Yii php ajax 异步上传图片

PHP基础同时被 3 个专栏收录

39 篇文章

订阅专栏

JS Jquery

12 篇文章

订阅专栏

Yii

9 篇文章

订阅专栏

AJAX异步上传，用第三方的组件实现，首先下载一个jQuery 的Ajax文件上传的组件，下载地址为：http://www.phpletter.com/，下载完毕解压找到ajaxfilemanagerv1.1\ajaxfilemanager\jscripts中的ajaxfileupload.js。

下面是本人YII项目中的测试例子

【controllers】

    public function actionToolsUpload() {
        $this->render("toolsUpload", array("promptData" => ""));
    }

    function actionUpload() {
        if (!empty($_FILES['img']['tmp_name'])) {
            //echo json_encode(array('file_infor' => dirname(__FILE__)));exit;
            //$dirs = dirname(__FILE__);
            /* 设定上传目录 */
            $uploads_dir = getcwd() . '\img\uploads';
            $uploads_dir = str_replace("\\","/",$uploads_dir);

//            chdir($uploads_dir);//转换新地址为当前目录,测试完关闭，不然无法正常上传
//            getcwd() //打印出新目录的绝对地址

            /* 检测上传目录是否存在 */
            if (!is_dir($uploads_dir) || !is_writeable($uploads_dir)) {
                if (!mkdir($uploads_dir, 0777)) {
                    echo json_encode(array('file_infor' => "mkdir error"));
                    exit;
                }
            }

            /* 设置允许上传文件的类型 */
            $allow_type = array("image/jpg", "image/jpeg", "image/png", "image/pjpeg", "image/gif", "image/bmp", "image/x-png");
            $get_img_type = $_FILES['img']['type'];
            if (!in_array($get_img_type, $allow_type)) {
                echo json_encode(array('file_infor' => "图片格式不对，请重新上传!"));
                exit;
            }
            /* 设置文件名为"日期_文件名" */
            date_default_timezone_set('PRC');
            $newName = date("YmdHis") . "_" . $_FILES['img']['name'];
            $path = $uploads_dir . '/' . $newName;

            /* 移动上传文件到指定文件夹 */
            $state = move_uploaded_file($_FILES['img']['tmp_name'], $path);
            $imgsrc = 'img/uploads/' . $newName;

            if ($state) {
                $message = "文件上传成功!";
                $message .= "文件名：" . $newName . "";
                $message .= "大小：" . ( round($_FILES['img']['size'] / 1024, 2) ) . " KB";
            } else {
                /* 处理错误信息 */
                switch ($_FILES['img']['error']) {
                    case 1 : $message = "上传文件大小超出 php.ini:upload_max_filesize 限制";
                    case 2 : $message = "上传文件大小超出 MAX_FILE_SIZE 限制";
                    case 3 : $message = "文件仅被部分上传";
                    case 4 : $message = "没有文件被上传";
                    case 5 : $message = "找不到临时文件夹";
                    case 6 : $message = "文件写入失败";
                }
            }
            echo json_encode(array('file_infor' => $message, 'imgsrc' => $imgsrc));
            exit;
        } else {
            echo json_encode(array('file_infor' => 'false'));
        }
    }

【views】

1、上传页

                <div class="control-group">
                        <label class="control-label" for="">图片：</label>
                        <div class="controls">
                            <div style="float: left;">
                            <input type="text" class="input-small" id="editModalTextEditUpfile" style="height: 20px"></div>
                            <div style="float: left;">
                            <iframe scrolling="no" src="<?php echo $this->createUrl('/toolsManagement/toolsUpload'); ?>" name="uploadIframe" style="width:200px; height:32px; padding: 0; border: 0px;"></iframe></div>
                        </div>
                    </div>

2、子框架

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="/bms/js/tools/jquery.js"></script>
        <script type="text/javascript" src="/bms/js/tools/ajaxfileupload.js"></script>
        <script type="text/javascript">
            function ajaxFileUpload()
            {
                $.ajaxFileUpload
                        (
                                {
                                    url: '/bms/toolsManagement/upload',
                                    secureuri: false,
                                    fileElementId: 'img',
                                    dataType: 'json',
                                    success: function(data)
                                    {
                                        alert(data.file_infor);
                                        // console.log(data.file_infor);                                 window.parent.document.getElementById('editModalTextEditUpfile').value=data.imgsrc;
                                    }
                                }
                        );
                return false;
            }
        </script>
    </head>
    <body style="margin-top: 0px; padding: 0px">

        <input id="img" type="file" size="45" name="img" style="width:65px;height:30px;">
        <input type="button" οnclick="return ajaxFileUpload();" value="上传" style="width:45px;height:30px;">

    </body>
</html>