ThinkPHP 图片上传 图片异步上传 ajax

此为ajax异步上传

首先是form表单里的代码

Photo:<input type="file" name="photo" id="up_photo"><br>
      <input type="hidden" name="thumb" value="" id="thumb"><br>  //这里是为了获取图片的名称
      <img src="" style="display:none" id="img_thumb" width="150" height="180"><br>  //先隐藏，然后点击上传后会显示一张预览图，后有详细解释

ajax代码

$("#up_photo").on("change",function(){
                    //用html方式上传
                    var cont=new FormData($("#frmlogin")[0]); //转换成DOM方法
                    $.ajax({
                      url:"{:U('Index/ajax_upload')}",       //跳转至控制器
                      type:"POST",
                      data:cont,
                      dataType:"JSON",
                      cache:false,
                      processData:false,
                      contentType:false,
                      success:function(data){
                          if (data.status) {
                              $("#img_thumb").attr('src',"./upload/" +data.msg);
                              $("#img_thumb").show();      //显示预览图
                              $("#img_thumb").val("./upload" +data.msg);
                          }else{
                              dialog.error(data.msg);
                          }
                      },
                    });

控制器代码

 public function ajax_upload(){
          $upload=new \Think\Upload();
          $upload->maxSize=3145728;
          $upload->exts=array('jpg','gif','png','jpeg');
          $upload->rootPath="./upload/";
          $upload->savePath='images/';
          $upload->autoSub=false;
          
          $info=$upload->upload();

          if($info){
            $file=$info['photo']['savepath'].$info['photo']['savename'];
            return show_ajax(1,$file);
          }else{
            return show_ajax(0,$upload->getError());
          }
    }

效果图