最近在做项目的时候遇到这样的一个问题，我将input标签与button标签做成一个上传文件的按钮组，如：，但是不想用form表单提交数据，想利用ajax异步提交数据。找了网上的资源后，发现可以利用FormData结合ajax异步传递数据，不再利用form表单提交。关于FormData详细内容可以参考: 传送门 。

1.首先，先编写出一个可以接受文件的按钮，我是利用bootstrap写的，其他样式可以自己编写或参照网上其他例子，我参照的是：https://www.cnblogs.com/kongxianghai/p/5624785.html,代码如下：

<button class='btn btn-danger btn-xs fileinput-button'><span>上传数据</span><input type='file' class='dl' name='' id='uploadFile' onchange='fileSubmit(this.name,this.files)'></button>

样式编写完成后，添加的onchange属性是为了在完成文件选择后进行跳转到ajax，自定义函数fileSubmit，写入了两个参数，第一个this.name是将一条数据的id获取到，以便在上传到数据库时与对应的上传文件进行绑定；第二个参数this.file是获取到对应的上传文件信息。

2.自定义函数是完成ajax与后端进行交互，利用FormData接收传递的文件数据与每条数据对应的id，获取文件信息也可以利用jQuery的控制器或DOM获取到（像下面👇代码注释部分就是获取到的文件信息），当获取到信息后在控制台输出(console.log(files);这里我仅上传一个文件，未上传多个文件)：
利用files.length判断是否有文件上传,有文件上传后利用FormData存储文件信息及id信息，如果还有其他信息可以继续添加。利用jQuery的ajax传递到后台，其中processData一定要设置成false，不需要序列化，默认是true的。

  /* 发送上传文件数据 */
    function fileSubmit(id,files)
    {
        // var files = document.getElementById('uploadFile').files;
        if (files.length !== 0){
            var formData = new FormData();
            formData.append('file', files[0]);
            formData.append('id',id);
            $.ajax({
                url:"{:url('index/uploadData')}",				//后台接收数据地址
                data:formData,          //发送的数据
                type: "POST",           //发送方式：post方式或get方式，传送数据最好选择post
                dataType: "json",       //文件类型
                cache: false,			//上传文件无需缓存
                processData: false,		//用于对data参数进行序列化处理,这里必须false
                contentType: false,
                success:function(data){
                    if (data.status == 1){
                        alert(data.message);
                        window.location.href = "{:url('user/myUpload')}"
                    }else {
                        alert(data.message);
                    }

                },
            });
        }
    }

3.将数据传递到后台后利用Request进行接收，直接根据键值（不知道说的准不准确😺）获取相应的数据，我引入了use think\facade\Request，使用Request::file(‘file’)就可以获取到文件信息啦，->validate是进行文件验证，这里我只验证的文件大小及文件的后缀，->move()是将文件存储在服务器中相应的文件中，验证成功后使用$info->getSaveName获取到存储的名字，这里tp5会根据日期创建时间子目录（如果想保留原始文件名字可以看我以前的一篇文章，希望有所帮助），最后将获取到的存储名字根据对应的id写到数据库中的数据表中，再返回前端相应的提示信息就完成上传了。

 //多条数据上传文件
    public function uploadData()
    {
        //判断提交的类型
        if (Request::isAjax()){
            //获取上传的数据信息
            $id = Request::param('id');
            $file = Request::file('file');
            //文件信息验证，验证成功后上传服务器指定目录,以public为起始目录
            $info = $file->validate([
                'size'=>7000000,
                'ext'=>'jpg,jpeg,png,gif',
            ])->move('uploads/');
            if (!$info){      //查看文件是否上传到服务器成功
                return ['status'=>-1,"message"=>$file->getError()]; //上传失败则返回错误信息
            }else {
                $data['demo_data'] = $info->getSaveName();   //上传成功则获取存储在服务器的名字
            }
            //将数据写到数据表中
            $res = Upload_Data::where('id',$id)->data($data)->update();
            if ($res){
                return ['status'=>1,"message"=>"数据上传成功！"];
            }else {
                return ['status'=>0,"message"=>"数据上传失败，请检查！"];
            }
        }else {
            $this->error('请求类型错误！');
        }

    }

4.总结：希望这篇文章可以帮助到你，欢迎留言，共同讨论！