2017-11-18 210 views
0

我正在使用laravel 5.4和jQuery Ajax来上传文件和一些表单数据。如何使用formData在laravel上传文件jquery ajax

我使用下面的代码

function submitDocument(){ 
    var formData = new FormData(); // Currently empty 
    var _token = $("#_token").val().trim(); 
    formData.append('title', $("#title").val()); 
    formData.append("doc",$("#doc")[0].files[0]); 
    $.ajax({ 
     url: "documents", 
     method: "post", 
     data:{_token,formData}, 
    }).done(function(data) { 

    }); 
    return false;// Not to submit page 
} 

而且我得到错误

Uncaught TypeError: Illegal invocation

enter image description here

我该如何解决这个问题?在此先感谢您的时间。

我能够通过使用

console.log(formData.get('title')); 
console.log(formData.get('doc')); 

enter image description here

+0

您是否尝试过加入FORMDATA对象内部_token价值? – gbalduzzi

+0

@gbalduzzi:是的我试过了,没有成功。 – C2486

+0

似乎是一个重复︰https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery –

回答

1

尝试在你的代码中加入processData: false, contentType: false以获得FORMDATA值

本替换你的脚本:

function submitDocument(){ 
var formData = new FormData(); // Currently empty 
var _token = $("#_token").val().trim(); 
formData.append('title', $("#title").val()); 
formData.append("doc",$("#doc")[0].files[0]); 
$.ajax({ 
    url: "documents", 
    method: "post", 
    data:{_token,formData}, 
    cache : false, 
    processData: false, 
    contentType: false 
}).done(function(data) { 

}); 
return false;// Not to submit page 
} 

通过默认情况下,作为对象传递给数据选项的数据t将被处理并转换为一个查询字符串,以适应默认的内容类型“application/x-www-form-urlencoded”。如果要发送DOMDocument或其他未处理的数据,请将此选项设置为false。

+0

我的代码不会去控制器,因为使用'processData:false,'我得到“令牌不匹配错误” – C2486

+0

在contentType之后使用此头部:false '头部:{X-CSRF-Token':$('meta [name =“csrf-token”]' ).attr('content') },' – Vinothini

+0

我试过这个,但没有得到'title'或'doc'的任何值 – C2486

0

尝试这种方式

$(document).ready(function(){ 
$("#form").on('submit',(function(e){ 
     e.preventDefault(); 
     var formdata = new FormData(this); 
     var _token = $("#_token").val().trim(); 
     formData.append('title', $("#title").val()); 
     formData.append("doc",$("#doc")[0].files[0]); 
     $.ajax({ 
      url: "/site/url", 
      type: "POST", 
      data:{token:_token,formData}, 
      contentType: false, 
      cache: false, 
      processData:false, 
      success: function(data){ 

      }, 
     }); 
    }));}); 
0
<script> 
$(document).ready(function() { 
    var url = "{{ url('/admin/file') }}"; 
    var options = { 
      type: 'post', 
      url: url,  
      headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'}, 
      dataType: 'doc', 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function (data) { 
       alert('Ok'); 
      }, 
      error: function (data) { 
       alert('Error'); 
      } 
    }; 
    $('#save').on('click', function() { 
     $("#form").ajaxSubmit(options); 
     return false; 
    }); 
}); 
</script> 
相关问题