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