thinkphp结合FormData实现ajax文件上传

前端页面：

<div class="form-group">
    <label for="imgurl" class="col-sm-2 control-label no-padding-right">栏目图标</label>
    <div class="col-sm-6">
        <input  placeholder="" name="imgurl" id="imgurl"  type="file">
        <input type="hidden" name="imgurl2" id="imgurl2">
    </div>
    <p class="help-block col-sm-4 red">* 必填</p>
</div>

imgurl用来上传文件，imgurl2用来存在文件上传后的路径。

前端js:

$('#imgurl').change(function(){
    var formData = new FormData();
    formData.append("imgurl",$("#imgurl")[0].files[0]);
    formData.append("service",'App.Passion.UploadFile');    
    $.ajax({
        url:"{:url('Cate/upfile')}", /*接口域名地址*/
        type:'post',
        data: formData,
        contentType: false,
        processData: false,
        success:function(res){                
            if(res.code==0){
                // alert('成功');
                $('#imgurl2').val(res.imgurl);
            }else{
                layer.msg(res.msg)
            }
        }
    });
   
});

监听imgurl,如果有文件上传。通过ajax提交，并获取上传文件路径赋值给imgurl2。

后端php上传：

public function upfile(){
    //获取上传文件详情信息
    $file = request()->file('imgurl');
    //validate(['ext'=>'','size'=>'']) ext:判断文件的后缀,size:限制文件上传的大小
    //move()   移动文件
    $info = $file->validate(['ext'=>'jpg,jpeg,png,gif','size'=>2048000])->move(ROOT_PATH . 'public' . DS . 'uploads');
    if($info){
        //获取上传文件的详情信息
        $info->getInfo();
        //获取上传文件的名称
        $imgurl = 'uploads'.'/'.$info->getSaveName();  
        $result['code'] = 0;
        $result['msg'] = '上传成功';
        $result['imgurl'] = $imgurl;       
    }else{
        $request['code'] = 2;
        $result['msg'] = '上传失败';            
    }
    return $result;
}

有了图片路径，整体表单提交就比较简单了。嘿嘿，希望对大家有所帮助。