使用ajax jquery上传图片

Posted 2023-05-09

【中文标题】使用ajax jquery上传图片

【英文标题】：Upload Img using ajax jquery

【发布时间】：2021-09-05 00:12:23

【问题描述】：

我想使用 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'：非法调用

【参考方案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>

【讨论】：

可以这样发送 = data: identity_id:input 吗？

不，只能使用 FormData() 上传文件