ThinkPHP3.2结合jq实现图片的异步上传

1 篇文章 0 订阅

html代码:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form id='myform' action='{:U("test/do_ajaxsubmit")}' method="post" enctype='multipart/form-data'>
<input type="file" name="img1"/></br>
<input type="file" name="img2"/></br>
<input type="text" name="name"/></br>
<input type="submit" name=""/>
</form>
<div id="imgShow" ></div>
<script type="text/javascript" src='__PUBLIC__/js/jquery-2.2.1.js'></script>
<script type="text/javascript" src='__PUBLIC__/js/jquery-form.js'></script>//这里需要把js文件放入到public/js目录下
<script>
$(document).ready(function() { 
    var options = { 
        target:        '#output1',   // target element(s) to be updated with server response 
        success:       showResponse,
        dataType:  'json',        // 'xml', 'script', or 'json' (expected server response type) 
    }; 
 
    $('#myform').submit(function(){
    $(this).ajaxSubmit(options);
    return false;
    });


    function showResponse(jsonData) {
    var json = JSON.parse(jsonData);
    for(n in json){
    path = $('#imgShow').append("<img width='200px' height='200px' src='__PUBLIC__/upload"+json[n].savepath+json[n].savename+"'></img>");
    }
    }


 
});
</script>
</body>
</html>


后端php控制器代码:

public function do_ajaxsubmit(){
        $upload=new Upload();
        $upload->rootPath='Public/upload';
        $upload->savePath  = '/img/';
        $info=$upload->upload();   //$upload->upload()一定要写 不然不会上传
        // dump($info['upload']['savepath'].$info['upload']['savename']);
        if(!$info){
            $this->ajaxReturn($upload->getError());
        }
        else{
            $this->ajaxReturn(json_encode($info));
        }
    }



解释:

var options = { }里面的参数是配置参数,这里只用到几个就可以实现异步上传图片了。


function showResponse(jsonData) {
     var json = JSON.parse(jsonData);
     for(n in json){
     path = $('#imgShow').append("<img width='200px' height='200px' src='__PUBLIC__/upload"+json[n].savepath+json[n].savename+"'></img>");
     }
}


这个是成功结果回调函数,参数jsonData是默认的,写了就可以获取到后端ajax返回来的结果。

然后进行处理则可以把上传到本地的图片展现出来。

最终结果是这样的

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值