options.data.indexOf is not a function when doing an ajax POST
Question
I get this error: Uncaught TypeError: options.data.indexOf is not a function .
I've looked for a solution and I found out it's probably because of the jQuery version (I have jQuery 3.3.1 btw). But most problems were trivial like $(window).on('load', ...) instead of $(window).load(...) . For this one I have no idea what's actually going on.
So here's the code:
function changePhotoPOST() {
var form = document.getElementById('someFormName');
var formData = new FormData(form);
$.ajax({
type: "POST",
url: "...someUrl...",
data: formData,
processData: false,
contentType: false,
success: onSuccess,
error: onFailed
});
}
The form looks like this:
<form id="someFormName">
<input type="text" value="@User.Identity.Name" name="Email" hidden />
<input id="file" type="file" onchange="changePhotoPOST()" name="File" hidden />
<a class="some classes" onclick="document.getElementById('file').click(); return false">Some text</a>
</form>
I use a styled link to open the file picker and as soon as a file is picked I submit the form. Still, the form might as well be a normal form with visible inputs, I don't think that's important.
So when the file is picked the the form is submitted, I get the mentioned error. From what I understand indexOf is used on 'data' for some reason? Is there a syntax error somewhere? Can I solve this without changing the jQuery version?
2 answers
solution1
0 2019-09-23 11:36:55
use form data like:
function changePhotoPOST() {
var form = $("form").serialize();
var formData = new FormData(form);
$.ajax({
type: "POST",
url: "...someUrl...",
data: formData,
processData: false,
contentType: false,
success: onSuccess,
error: onFailed
});
}
solution2
0 2019-09-23 13:21:41
Not sure if you have pasted the exact code you are using but your element id is wrong.
This fiddle seems to work (I don't have an url which recieves the data but the request is sent).
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<form id="ChangePhotoForm">
<input type="text" value="asdsa" name="Email" />
<input id="file" type="file" onchange="changePhotoPOST()" name="File" hidden />
<a class="some classes" onclick="document.getElementById('file').click(); return false">Some text</a>
</form>
</body>
</html>
JS:
function changePhotoPOST() {
var form = document.getElementById("ChangePhotoForm");
var formData = new FormData(form);
$.ajax({
type: "POST",
url: "myUrl",
data: formData,
processData: false,
contentType: false,
success: onSuccess,
error: onFailed
});
}
function onSuccess(response) {
console.log("response", response);
}
function onFailed(response) {
console.log("response", response);
}
It is using jQuery 3.3.1;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.