如何在jquery ajax中使用formData上传laravel中的文件

我使用laravel 5.4和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 } 

我收到了错误

未捕获的TypeError：非法调用

我怎样才能解决这个问题 ？ 在此先感谢您的时间。

我可以通过使用获得formData中的值

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

Answer 1

尝试在代码中添加processData: false, contentType: false

用这个替换你的脚本：

 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 } 

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

Answer 2

Answer 3

试试这种方式

 $(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){ }, }); }));});