英文:
JQuery submit a file using AJAX where the file is not in a Form
问题
以下是您要翻译的内容:
Error
Uncaught TypeError: Illegal invocation
at o (jquery-1.10.2.min.js:6:7939)
at gn (jquery-1.10.2.min.js:6:8398)
at x.param (jquery-1.10.2.min.js:6:8180)
at Function.ajax (jquery-1.10.2.min.js:6:12615)
at powWowDashboard.do:18456:15
jquery-1.10.2.min.js:6 Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation
at o (jquery-1.10.2.min.js:6:7939)
at gn (jquery-1.10.2.min.js:6:8398)
at x.param (jquery-1.10.2.min.js:6:8180)
at Function.ajax (jquery-1.10.2.min.js:6:12615)
at powWowDashboard.do:18456:15
问题
所以,我认为问题出在我尝试上传的data
格式不正确。
我获取数据如下:
let files = event.target.files;
然后将其设置在ajax请求中:
data: file,
问题
如何为上传的文件设置请求中的data
?
英文:
I am creating a modal that can be used in multiple places in my application to upload files, as a result I am not using a <form>
because this may be used within an existing form that I don't want to submit.
Please Note: this <input type=file>
is not in an html <form>
. I tried to post this question, but someone marked it as a duplicate and deleted it, and the 'duplicate' answers were all examples where it used a form. please do not mark this question as a duplicate if the examples use a form.
html
<input type="file" id="CustomerInvoices-${ogoneRef}" name="uploadFileNameForCustomerInvoices">
JavaScript
$('#CustomerInvoices-'+ogoneRef).change(function (e) {
clickSubmitUploadFiles(e, ogoneRef);
});
I have the following JavaScript function.
function clickSubmitUploadFiles(event, ogoneRef) {
let files = event.target.files;
;[...files].forEach(function (file) {
let urlString = 'http://localhost:8085/papertrail/upload-document/'+userName+'/'+ogoneRef;
$.ajax({
type: "POST",
url: urlString,
headers: {
"Authorization": "Basic " + btoa(username+":"+password)
},
data: file,
error : function (result) {
console.log('error', result);
},
success : function (result) {
console.log('success', result)
}
});
});
}
Error
> Uncaught TypeError: Illegal invocation
> at o (jquery-1.10.2.min.js:6:7939)
> at gn (jquery-1.10.2.min.js:6:8398)
> at x.param (jquery-1.10.2.min.js:6:8180)
> at Function.ajax (jquery-1.10.2.min.js:6:12615)
> at powWowDashboard.do:18456:15
>
> jquery-1.10.2.min.js:6 Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation
> at o (jquery-1.10.2.min.js:6:7939)
> at gn (jquery-1.10.2.min.js:6:8398)
> at x.param (jquery-1.10.2.min.js:6:8180)
> at Function.ajax (jquery-1.10.2.min.js:6:12615)
> at powWowDashboard.do:18456:15
Problem
So I think the problem is with the data
I am trying to upload is not in the correct format.
I get the data as follows:
let files = event.target.files;
and then set it in the ajax request:
data: file,
Question
How should I set the data
for the uploaded file in the request?
答案1
得分: 2
你可以使用 FormData
来发送文件,即使它不是表单的一部分。不需要在循环中进行多次 AJAX 请求。
const formData = new FormData();
const files = event.target.files;
for (const file of files) {
// 附加文件
formData.append('files[]', file);
}
...
$.ajax({
...
data: formData
})
如果你正在使用 PHP 后端,这些值可以在 $_FILES
中找到。
英文:
You can use FormData
to send the files, even if it's not a part of any form. No need to make multiple ajax requests in a loop.
const formData = new FormData();
const files = event.target.files;
for (const file of files) {
// Attach files
formData.append('files[]', file);
}
...
$.ajax({
...
data: formData
})
If you're using a PHP backend, the values are available in $_FILES
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论