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返回来的结果。
然后进行处理则可以把上传到本地的图片展现出来。
最终结果是这样的
