解决ajax异步上传文件的问题

HTML：

<form id=" avater" name=" formlist">

{{ csrf_field() }}

<ul class="list-group container" style="width:50%">

    <li class="list-group-item list" style="border-radius: 5px">

        <input id=" image" class="file" type="file" name=" file">

        <button id=" btn" style=" width: 50px;height: 25px;padding:0" class="btn btn-primary radius" type="button">上传</button>

    </li>

</ul>

</form>

Jquery:

$('#btn').on('click', function() {

    var file = $('#image')[0].files[0];

    var form = $('#avater')[0];

    var formdata = new FormData(form);

    formdata.append('image', file)

   $.ajax({

       type: 'post',

       url: "{{url('setava')}}",

       data: formdata,

       dataType: 'json',

       processData: false,

       contentType: false,

       success: function(res) {

            if (res.status == 0) {

                 alert(res.msg);

                 window.location.href = "{{url('set')}}";

            }

      }

});

红色部分为重要部分，使用FormData对象可以解决ajax异步上传文件的问题。并且可以同时传输表单内容和文件的合并上传，后台代码正常接值就可以。（文件时用file来接）