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

来源：互联网发布：之前没cos过知乎编辑：程序博客网时间：2024/05/16 10:26

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

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

最终结果是这样的

0 0