用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；