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

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返回来的结果。

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

最终结果是这样的

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

猜你喜欢