使用 ajax jquery 上传图片

Question

我想使用 ajax jquery 上传图片这是我的观点 :

<form id="checkout-form" enctype="multipart/form-data">
    <input class="input-file" type="file" name="identity_id" id="identity_id">
</form>

和我的 jquery :

    <script>
    $('#checkout-form').on('submit', function(event){
    event.preventDefault();
    var $i = $( '#identity_id' ),
    input = $i[0].files[0];
    $.ajax({
       url:"{{ route('user.order.create') }}",
       method:"POST",
       data:{
            identity_id:input
       },
       dataType: 'json',
       contentType: false,
       cache: false,
       success:function(){

       }
     })
    })
   });
  </script>

并显示错误：

Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation

Answer 1

试试这个

<script>
        $('#checkout-form').on('submit', function(event){
        event.preventDefault();
        var i = $( '#identity_id' ),
        var formData = new FormData();
        var input = i[0].files[0];
        formData.append('identity_id',input);
        $.ajax({
           url:"{{ route('user.order.create') }}",
           method:"POST",
           data:formData,
           contentType: false,
           cache: false,
           success:function(){
    
           }
         })
        })
       });
      </script>

使用 ajax jquery 上传图片

Upload Img using ajax jquery

ajax

jquery

jquery-file-upload