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

Posted 2022-09-30 cwjdd

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来接）