ajax上传文件php后台处理

提示：第一篇博客，记录一下平时写的代码~~~

提示：以下是本篇文章正文内容，下面案例可供参考

一、引入jquery.js

<script src="/static/vender/jquery.js"></script>

这里提供了jquery下载地址：https://jquery.com/download/

二、前端

1.html

<form type="post" action="/index.php/user/test" id="forms">
    <div>
        <label>姓名：</label>
        <input type="text" value="" name="name" placeholder="您的姓名" id="name">
    </div>
    <div>
        <label>头像</label>
        <input type="file" name="file" id="file">
    </div>
    <div>
        <input type="submit" value="确认" >
    </div>
</form>

2.javascript

$("#forms").submit(function(){
     
        var formData = new FormData();
        if($('#file').val()==null){
     
            alert("请选择头像");
            return false;
        }
        formData.append('url',$('#file')[0].files[0]); //图片
        formData.append('name',$('#name').val());//姓名
        $.ajax({
     
            url:"/index.php/user/doTest",
            type:"POST",
            contentType:false,
            data:formData,
            cache: false, //上传文件不需要缓存
            processData: false // 告诉jQuery不要去处理发送的数据
        });
        return false;  //防止跳转
    });

2.后台数据处理

 public function doTest(){
     
        $file = $this->request->file('url'); //得到前端传过来的数据
        dump($file)
        $param = $this->request->param();
        $name = $param['name'];

    }

此时呢可以f12切换到网络面板进行调试

 public function doTest(){
     
        $file = $this->request->file('url'); //得到前端传过来的数据
        $param = $this->request->param();
        $name = $param['name'];
        $saveUrl = Filesystem::disk('photo')->putFile("topic",$file);  //文件上传，具体参考tp手册
        $saveUrl="/uploads/".$saveUrl; //图片地址拼接
        $data = [];
        $data['name'] = $name;
        $data['url'] = $saveUrl;
        die(json_encode($data));
    }

总结

第一篇博客到此就结束了~~
总结一下：
1.由于我是用jquery ajax写的所以需要引入jquery插件
2.利用ajax异步需要用到FormData对象并用append插入
3.后台接收数据如果是文件需要file而不是直接param