用Thinkphp框架做无刷新上传图片

视图层 View

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Ajax无刷新上传</title>

 </head>

 <script type="text/javascript" src="__PUBLIC__/js/jquery-1.10.2.min.js"></script>

 <script src="__PUBLIC__/js/Uploadify/jquery.uploadify.min.js" type="text/javascript"></script>

 <body>

     <div>

         <input type="file" name="pic" id="fields">

     </div>

     <div style="width:150px;height:150px;border:1px solid red" class="b">

         <img src="{$_SESSION['userinfo']['img2']}" class="picimg" style="width:150px">

     </div>

 </body>

     <script type="text/javascript">

     //修改头像

     $(function() {

            $("#fields").uploadify({

             //指定swf文件

             'swf': '__PUBLIC__/js/Uploadify/uploadify.swf',

             //后台处理的页面

             'uploader': "{:U('Index/uploads','',false)}",//上传图片的方法

             //按钮显示的文字

             'buttonText': '上传头像',

              //显示的高度和宽度

             "height" : 30,

             'fileTypeDesc': 'Image Files',

             //允许上传的文件后缀

             'fileTypeExts': '*.gif; *.jpg; *.png',

             //发送给后台的其他参数通过formData指定

             //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },

             "method" : 'post',//方法，服务端可以用$_POST数组获取数据

             'removeTimeout'  : 1,

             "onUploadSuccess" : uploadPicture

           });

           //可以根据自己的要求来做相应处理

           function uploadPicture(file, data){

             var data = eval('(' + data + ')');

            if(data.errorcode){

                //如果成功，就将返回来值放到要显示的DIV里面

                 $.post(

                     "{:U('ajaxImg')}",//返回值的方法

                     function (data){

                         $('.picimg').attr({src:data});//找到IMG标签，修改属性

                     },

                     'json'

                 )

            } else {

             alert(data.errormsg);

            }

           }

      });

     </script>

 </html>

控制器层 Controller

 <?php

     namespace Home\Controller;

     use Think\Controller;

     class IndexController extends Controller

     {

         //视图

         public function index()

         {

             $this->display();

         }

         //上传图片方法

         public function uploads()

         {

               $arr = array( "errorcode"=>"1","errormsg"=>"上传成功");

               $model = M('img');//放图片的数据库

               if (!empty($_FILES)) {

                 //图片上传设置

                 $config = array(

                 'maxSize' => 9999999,

                 'rootPath' => 'Public',

                 'savePath' => '/Uploads/',

                 'saveName' => array('uniqid',''),

                 'exts'  => array('jpg', 'gif', 'png', 'jpeg'),

                 'autoSub' => false,

                 'subName' => array('date','Ymd'),

                    );

                   $upload = new \Think\Upload($config);// 实例化上传类

                   $info = $upload->upload();

                 $data['img'] = '/TP4/thinkphp_3.2.3_full/Public'.$info['Filedata']['savepath'].$info['Filedata']['savename'];//绝对路径

                 if($info){

                     $arr['errorcode'] = "0";

                     $model->add($data);

                     $_SESSION['userinfo']['img2'] = $data['img'];//将路径放到session中

                } else {

                 $arr["errorcode"] = "1";

                 $arr["errormsg"] = $upload->getError();

                }

                /* 返回JSON数据 */

                $this->ajaxReturn($arr);

               }

         }

         //在视图中的AJAX返回值方法内用$.POST再取一次返回值

         public function ajaxImg()

         {

             $arr = $_SESSION['userinfo']['img2'];

             $this->ajaxReturn($arr);

         }

     }

页面效果

数据库

思路：

　　1.首先调用插件 jquery.uploadify.min.js

　　　　在视图层的<script></script>标签内写好配置信息

　　2.然后在控制器层写好调用方法，上传成功时候就把路径存储到$_SESSION中，因为$_SESSION全局通用，比较方便

　　以上两步的具体代码在插件中都可以直接复制粘贴，修改以下数据库名，图片存储路径就可以，我用的是绝对路径。

　　3.返回的是响应成功再调用一次AJAX，从第二个方法，也就是控制器层 49 行。将$_SESSION中的值返回到视图层中。

　　4.视图层 50 行，用attr()方法，找到IMG标签，把返回的路径添加到src中。完成。

附件 jquery.uploadify.min.js插件

　　百度云http://pan.baidu.com/s/1kUH4UN1；

　　

Thinkphp框架 -- ajax无刷新上传图片的更多相关文章

  1. TP3.2：实现Ajax无刷新上传图片

    1.基于TP3.2+ajaxfileupload进行无刷新上传图片,本次只上传一张,多张以后搞出来再发 2.效果:   3.html代码: <html> <head> < ...

  2. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  3. ajax无刷新上传图片

    页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> & ...

  4. 基于THINKPHP+layui+Ajax无刷新实现图片上传预览

    <fieldset class="layui-elem-field" style="width:500px;margin:50px 0 0 300px;" ...

  5. 无刷新上传图片，ajax 和 iframe

    iframe 上传 upload.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...

  6. thinkphp下实现ajax无刷新分页

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  7. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  8. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  9. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

随机推荐

  1. Android＋Eclipse＋Java：在“正在启动 CrazySnake”期间发生了内部错误， java.lang.NullPointerException

    删除工作空间下的.metadata 文件夹 重启 Eclipse 清理工作空间

  2. Jquery 弹出提示框输入插件 apprise 修改中文按钮以及使用说明

      apprise的使用非常简单,引入js脚本和css <script type="text/javascript" src="/js/apprise-1.5.fu ...

  3. Ubuntu解决Sublime Text 2安装GBK Encoding Support插件仍然乱码

    Ubuntu 12.04 32位下,为Sublime Text 2安装Package Control: 1. 用Ctrl+~打开控制台,输入 import urllib2,os; pf='Packag ...

  4. zoj 2770 Burn the Linked Camp (差分约束系统)

    // 差分约束系统// 火烧连营 // n个点 m条边 每天边约束i到j这些军营的人数 n个兵营都有容量// Si表示前i个军营的总数 那么 1.Si-S(i-1)<=C[i] 这里 建边(i- ...

  5. 动态加载so文件

    在开发过程中,经常会用到第三方库,比如地图.视频.文档编辑.图表之类.依赖这些库,需要添加其SDK,有时需要用到jni层的So文件,比如百度地图等. 那么问题来了,如果两个不同的库之间的so文件发生冲 ...

  6. echo二次开发 ecshop 函数列表

    lib_time.php (时间函数) gmtime() P: 获得当前格林威治时间的时间戳 /$0 server_timezone() P: 获得服务器的时区 /$0 local_mktime($h ...

  7. hisi平台mii网络模式和rmii网络模式的uboot制作

    MII网络uboot编译说明 一:编译生成默认的uboot1. 进入到uboot目录a. cd /home/satan/Hi3518_SDK_V1.0.7.0/osdrv/uboot2. 新建临时文件 ...

  8. 第一个简单的android项目

    开发平台:windows7+Eclipse+andriod SDK(24.0)+ADT(23.0.4).这个环境的搭建在前一篇文章(Mobile testing下的appium测试)里面已经描述了. ...

  9. rfid门禁系统笔记

    非接触式IC卡性能简介 主要指标: 1:容量为8K 位的EEPROM 2:分为16个扇区,每个扇区为4块,每块16个直接,以块为存取单位 3:每个扇区有独立的一组密码和访问控制 4:每张卡具有唯一的序 ...

  10. 暴雪hash算法

    你有一个非常大的字符串数组A,现在又有一个字符串B,需要你去检测B是否存在于A中.最简单粗暴的方法是遍历整个A,但是这个方法投入到实际应用时的运行速度是难以接受的.在没有与其他所有字符串比较前怎么知道 ...