码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-04 10:10:31      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:process   使用   end   问题   stat   cti   nta   bsp   ref   

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

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

标签:process   使用   end   问题   stat   cti   nta   bsp   ref   

原文地址:https://www.cnblogs.com/CWJDD/p/11456883.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!