Thinkphp框架 -- ajax无刷新上传图片

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

视图层 View

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Ajax无刷新上传</title>
 6 </head>
 7 <script type="text/javascript" src="__PUBLIC__/js/jquery-1.10.2.min.js"></script>
 8 <script src="__PUBLIC__/js/Uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
 9 
10 <body>
11     <div>
12         <input type="file" name="pic" id="fields">
13     </div>
14     <div style="150px;height:150px;border:1px solid red" class="b">
15         <img src="{$_SESSION['userinfo']['img2']}" class="picimg" style="150px">
16     </div>
17 </body>
18     <script type="text/javascript">
19     //修改头像
20     $(function() {
21            $("#fields").uploadify({
22             //指定swf文件
23             'swf': '__PUBLIC__/js/Uploadify/uploadify.swf',
24             //后台处理的页面
25             'uploader': "{:U('Index/uploads','',false)}",//上传图片的方法
26             //按钮显示的文字
27             'buttonText': '上传头像',
28              //显示的高度和宽度
29             "height" : 30,
30             'fileTypeDesc': 'Image Files',
31             //允许上传的文件后缀
32             'fileTypeExts': '*.gif; *.jpg; *.png',
33             //发送给后台的其他参数通过formData指定
34             //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
35             "method" : 'post',//方法，服务端可以用$_POST数组获取数据
36             'removeTimeout'  : 1,
37             "onUploadSuccess" : uploadPicture
38           });
39           //可以根据自己的要求来做相应处理
40           function uploadPicture(file, data){
41             var data = eval('(' + data + ')');
42            if(data.errorcode){
43                //如果成功，就将返回来值放到要显示的DIV里面
44                 $.post(
45 
46                     "{:U('ajaxImg')}",//返回值的方法
47 
48                     function (data){
49 
50                         $('.picimg').attr({src:data});//找到IMG标签，修改属性
51 
52                     },
53 
54                     'json'
55 
56                 )
57 
58            } else {
59             alert(data.errormsg);
60            }
61           } 
62      });
63 
64     </script>
65 
66 </html>

控制器层 Controller

 1 <?php
 2     namespace HomeController;
 3     use ThinkController;
 4     class IndexController extends Controller 
 5     {
 6         //视图
 7         public function index()
 8         {
 9             $this->display();
10         }
11 
12         //上传图片方法
13         public function uploads()
14         {
15               $arr = array( "errorcode"=>"1","errormsg"=>"上传成功");
16               $model = M('img');//放图片的数据库
17               if (!empty($_FILES)) {
18                 //图片上传设置
19                 $config = array( 
20                 'maxSize' => 9999999, 
21                 'rootPath' => 'Public',
22                 'savePath' => '/Uploads/', 
23                 'saveName' => array('uniqid',''), 
24                 'exts'  => array('jpg', 'gif', 'png', 'jpeg'), 
25                 'autoSub' => false, 
26                 'subName' => array('date','Ymd'),
27                    );
28                   $upload = new ThinkUpload($config);// 实例化上传类
29                   $info = $upload->upload();
30 
31                 $data['img'] = '/TP4/thinkphp_3.2.3_full/Public'.$info['Filedata']['savepath'].$info['Filedata']['savename'];//绝对路径
32 
33                 if($info){
34 
35                     $arr['errorcode'] = "0";
36                     $model->add($data);
37                     $_SESSION['userinfo']['img2'] = $data['img'];//将路径放到session中
38 
39                } else {
40                 $arr["errorcode"] = "1";
41                 $arr["errormsg"] = $upload->getError();
42                }
43                /* 返回JSON数据 */
44                $this->ajaxReturn($arr);
45               }
46         }
47 
48         //在视图中的AJAX返回值方法内用$.POST再取一次返回值
49         public function ajaxImg()
50         {
51             $arr = $_SESSION['userinfo']['img2'];
52             
53             $this->ajaxReturn($arr);
54         }
55     }

页面效果

数据库

思路：

　　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；