在做ajax无刷新上传时，遇到很多问题，一开始想用JQ直接接$(‘[input=file]’).val的值，但是发现这个接到根本就不是一个值，百度发现浏览器由于安全问题，不会显示这个值。
然后用想在文件改变后自动提交submit,改变action的地址，上文件上传后再返回回来，这个方法造成了页面刷新。
html页面
<form method="post" action="{:U('action',array('action'=>adddo))}" enctype = "multipart/form-data" id= 'form'>
<input type="file" name="picname" id="fields" onchange = ‘eventStart()’>
</form>
JQ
function eventStart(){
var tmpHref="{:U('show')}";
$('#form').attr('action',tmpHref);
$('#form').submit();
}
}
之后在某个博主那看到思路。进行了自己的理解，加修改
1.首先调用插件jquery.uploadify.min.js 在视图层<script></script>内写好配置信息
2.然后在控制层写好调用方法，上传成功时就把路径存储到$_SESSION,因为session全局通用
3.返回的是响应成功再调用一次ajax,从第二个方法，讲$_SESSION中的值返回到视图层中
4.用attr()方法，找到img标签，把返回路径添加到src中。
在文件上传的时候要找清楚路径在ThinkPHP\Library\Think\Upload.class.php中
'rootPath' => './public/images/file/', //保存根路径 就是你想把文件上传到哪一个文件夹里面 但是这个会自动生成当前日期加文件名
'savePath' => '', //保存路径
当然这些值我们也可以在外边定义
$config = array(
'maxSize' => 9999999,
'rootPath' => 'Public/Uploads/',
'savePath' => '',
'saveName' => array('uniqid',''),
'exts' => array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' => false,
'subName' => array('date','Ymd'),
);
html页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax无刷新上传</title>
</head>
<script src="__PUBLIC__/Js/jquery-1.8.3.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 Admin\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/Uploads/',//上传哪一个文件夹里面
'savePath' => '',
'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'] = '/project/Public/Uploads/'.$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);
}
}
结果：
扫一扫
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
