`

Yii php ajax实现异步上传图片

Yiiphpajax异步上传图片 
阅读更多

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" onclick="return ajaxFileUpload();" value="上传" style="width:45px;height:30px;">

    </body>
</html>

分享到：
| MySQL 的 10 个技巧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    yii ajax应用

    在Yii中，Ajax（异步JavaScript和XML）技术被广泛应用于提高用户体验，通过发送背景请求来更新部分页面内容，而无需刷新整个页面。下面将详细解释Yii中实现Ajax应用的原理，以及上述例子中的具体实现过程。 1. **...

    Yii2实现ajax上传图片插件用法

    在Yii2框架中实现ajax上传图片功能，可以通过下载并使用第三方插件mdmsoft/yii2-upload-file来完成。这个过程涉及到了几个关键知识点，包括模型的构建、行为的附加、表单的创建和数据的验证和处理。 首先，需要创建...

    yii ajax demo

    在 Yii 中使用 AJAX（异步 JavaScript 和 XML）可以极大地提升用户体验，因为它允许后台数据的无刷新更新。本教程将深入探讨如何在 Yii 框架中实现 AJAX 功能，以及与之相关的知识点。 首先，`vtalk.ini` 文件可能...

    yii2 modal弹窗之ActiveForm ajax表单异步验证

    在Yii2框架中，实现ActiveForm的ajax表单异步验证，主要涉及的技术点包括：ActiveForm组件、ajax验证、modal弹窗、以及客户端和服务端的数据交互。本文将针对这些知识点进行详细解读。 ### 一、ActiveForm组件 在...

    php框架：ThinkPHP+YII打包下载

    6. **AJAX支持**：易于实现页面异步更新，提升用户体验。 7. **单元测试**：内置单元测试框架，保障代码质量。 8. **YII2**：YII的最新版本，引入了更多的现代PHP特性，如Composer依赖管理、命名空间等。 **结合...

    php带进度条批量上传

    当文件通过Ajax异步上传时，可以通过监听`progress`事件来获取已上传的数据量，并更新进度条的状态。 ```html &lt;progress id="uploadProgress" value="0" max="100"&gt;&lt;/progress&gt; var xhr = new XMLHttpRequest();...

    The Yii Book: Developing Web Applications Using the Yii PHP Framework（Part1&2）

    9. **Ajax与jQuery**：使用Yii集成的jQuery库，实现异步交互和动态更新。 10. **扩展与插件**：理解和使用Yii社区提供的第三方扩展，以及如何创建自己的扩展。 通过深入阅读《Yii 书》，开发者不仅可以提升PHP编程...

    yii2使用ajax返回json的实现方法

    在Yii2框架中实现AJAX请求，一般需要以下几个步骤： 1. 在控制器（Controller）中定义一个动作（Action）来处理AJAX请求。这个动作会检查请求参数，执行相应的业务逻辑，并根据结果返回JSON格式的数据。 2. 在视图...

    yii 最新版

    - 通过 jQuery 和其他 AJAX 工具集，Yii 可以轻松实现异步页面更新和无刷新操作。 9. **国际化和本地化** - 支持多语言，方便不同地区用户使用。 10. **命令行工具** - 提供 yiic 命令行工具，用于生成模型、...

    yii2-file-upload-master.zip

    这个"yii2-file-upload-master.zip"压缩包包含了一个针对Yii2.0框架的图片上传扩展，特别设计来支持异步加载缩略图功能。这种功能在现代网页应用中非常常见，特别是在用户需要上传图像并即时查看预览效果时。 该...

    yii框架商城

    在前端，Yii支持AJAX，可以实现异步交互，提升用户体验。比如，商品筛选、添加到购物车等操作可以无需刷新页面完成。Yii的模板引擎也允许开发者使用简洁的语法编写复杂的视图逻辑。 总的来说，“yii框架商城”是一...

    ajax翻页效果模仿yii框架自己写的

    本文将介绍如何在网页中实现Ajax翻页效果，模仿Yii框架中的分页功能。Ajax（Asynchronous JavaScript and XML）技术允许我们在不重新加载整个页面的情况下更新部分网页内容，提供更好的用户体验。 首先，观察给定的...

    Yii2实现ActiveForm ajax提交

    在实际开发过程中，我们常常需要实现异步的AJAX提交，从而提升用户体验。本文针对Yii2框架下的ActiveForm组件如何进行AJAX提交进行详细介绍。 首先，要实现ActiveForm的AJAX提交，需要在ActiveForm组件中启用AJAX...

    yii framework 商城

    同时，它还支持AJAX，可以实现异步更新，提升用户体验。 最后，Yii框架具有良好的社区支持和丰富的扩展库，如yiisoft/yii2-gii自动生成代码工具，yiisoft/yii2-debug调试工具，以及各种第三方组件，如用户认证和...

    Yii2.0中使用js异步删除示例

    异步操作可以通过JavaScript和AJAX来实现，这样就不需要重新加载整个页面即可完成数据的删除。 在Yii2.0中实现js异步删除主要涉及到以下几个知识点： 1. 后端控制器的实现：在Yii2.0中，控制器负责处理用户的请求...

    Yii2基于Ajax自动获取表单数据的方法

    本篇文章主要探讨了如何在Yii2中结合Ajax技术实现表单数据的自动获取，特别是在用户选择表单中的某个值（例如邮政编码）后，自动填充关联的数据（如城市和省份）。这种功能常见于地址输入字段，能够提升用户填写表单...

    yii1.1_application_development_cookbook_code

    7. **Ajax支持**：展示如何集成jQuery库，实现页面的部分更新和异步请求。 8. **模板和布局**：介绍如何创建和管理视图模板，使用布局优化用户体验。 9. **国际化和本地化**：讨论如何实现多语言支持，包括翻译和...

    使用Yii整合的pjax（pushstate+ajax）实现无刷新加载页面

    在本文中，我们将探讨如何使用Yii框架集成Pjax（Pushstate + Ajax）技术，以实现页面无刷新加载。Pjax结合了HTML5的history.pushState和Ajax技术，能够在用户浏览网站时无需完全刷新页面，从而提高响应速度和用户...

    yii-kendoui这个是yii与kendo的整合html5

    4. **AJAX 集成**：Yii 提供了方便的 AJAX 功能，可以与 Kendo UI 的组件配合使用，实现异步更新和无刷新操作，提升用户体验。 5. **自定义主题**：Kendo UI 允许开发者定制主题，以匹配应用的整体风格。在“yii-...

    Bootstrap进度条与AJAX后端数据传递结合使用实例详解

    AJAX（Asynchronous JavaScript and XML）是一种异步通信技术，允许在不刷新页面的情况下与服务器进行数据交互。AJAX技术可以大大提高用户体验，减少服务器的负载。 在上述代码中，AJAX技术被用于与服务器进行数据...

Magicbox
Global site tag (gtag.js) - Google Analytics