JQuery使用AJAX提交文件,文件不在表单中。

huangapple go评论72阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年2月24日 17:06:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/75554552.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定