Develop Reference

file upload serialize jquery without form

how to send image file data with jquery ajax in a table without using a form attribute
i am using serialize this but file data is not in payload
$('.upload').on('click', function() {
var mdata = $(this).closest('tr').find("input, select, textarea").serialize();
$.ajax({
url: "../../../uploadimage",
data:mdata,
timeout:false,
type:'POST',
dataType:'JSON',
success:function(res){
...
}
});
});
while for other text input attributes run normally

You need to use formData to post images with ajax.
If you have to use closest, then you should use both together.
Here is an example :
$(document).ready(function(){
$(".upload").submit(function(e){
e.preventDefault();
var [form] = $(this).closest('form');
var formData = new FormData(form);
$.ajax({
url:'../../../uploadimage',
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
...
}
});
});
});
If you dont have to use closest, then this is your answer : how to do file upload using jquery serialization

FormData in multiple ajax request files

I'm trying to do a Ajax's loops requests for send files to an API but i don't not what I send at Ajax's data. When I do only file in upload I use the own formdata object and works very well. I tried use loop and each row send an individual file but it's doesn't works too:
Multiple files:
var form_data = new FormData();
for(i=0;i<3;i++){ // 3 length just for tests
form_data.append('file', $('#myfile').prop('files')[i]);
}
for (var value of form_data.values()) {
$.ajax({
url: 'URI',
data: value,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
alert("Success!")
},
error: function(e){
alert("Error")
}
});
}

How to send Form Data and other Data using AJAX

I'm trying to send HTML form data using AJAX however I'm also trying to send other data along with the same AJAX POST call.
Is this possible?
$('#HTMLConForm').on('submit', function (e)
{
e.preventDefault();
$.ajax({
url: "***NewUserURL.com***",
type: "POST",
data:{
'otherinfo': otherinfo,
'form_data': new FormData(this),
},
processData: false,
contentType: false,
success: function (data)
{
alert('You Have Registered')
/*window.location = "index.html"; */
},
error: function (xhr, desc, err)
{
}
});
});
Any help with be appreciated!

Pass the FormData object itself to data, don't wrap it in a simple object.
Use the FormData object's append method to add additional data.
e.preventDefault();
const formdata = new FormData(this);
formdata.append("otherinfo", otherinfo);
$.ajax({
url: "***NewUserURL.com***",
type: "POST",
data: formdata,

Ajax send array and Image in same request

I want to make an ajax call that sends both JSON and file data to my PHP backend. This is my ajax call currently:
$.ajax({
type: 'POST',
dataType: 'json',
data: jsonData,
url: 'xxx.php',
cache: false,
success: function(data) {
//removed for example
}
});
The data(jsonData) is a JSON array that also holds the input from a file select as well(I am assuming this is wrong due to the type mismatch). I tried using contentType: false, and processData: false, but when I try to access $_POST data in PHP there is nothing there. The data I am passing does not come from a form and there is quite a bit of it so I do not want to use FormData and append it to that object. I am hoping i will not have to make two ajax calls to accomplish this.

If you want to send data along with any file than you can use FormData object.
Send your jsonData as like that:
var jsonData = new FormData(document.getElementById("yourFormID"));
Than in PHP, you can check your data and file as:
<?php
print_r($_POST); // will return all data
print_r($_FILES); // will return your file
?>

Try Using formdata instead of normal serialized json
Here's an example:
var formData = new FormData();
formData.append("KEY", "VALUE");
formData.append("file", document.getElementById("fileinputID").files[0]);
then in your ajax
$.ajax({
type: 'POST',
url: "YOUR URL",
data: formData,
contentType: false,
processData: false,
dataType: 'json',
success: function (response) {
CallBack(response, ExtraData);
},
error: function () {
alert("Error Posting Data");
}
});

You can try like this also
You can visit this answer also
https://stackoverflow.com/a/35086265/2798643
HTML
<input id="fuDocument" type="file" accept="image/*" multiple="multiple" />
JS
var fd = new FormData();
var files = $("#fuDocument").get(0).files; // this is my file input in which We can select multiple files.
fd.append("kay", "value"); //As the same way you can append more fields
for (var i = 0; i < files.length; i++) {
fd.append("UploadedImage" + i, files[i]);
}
$.ajax({
type: "POST",
url: 'Url',
contentType: false,
processData: false,
data: fd,
success: function (e) {
alert("success");
}
})

How to send FormData and handle it at server-side using ASP.NET

Below is an Ajax request to a static web method at server. I want to send the file and its associated details to the server. Even if I send the data to the server, i'm not able to access the file at the server side using c#.net.
The most difficult part being accessing the FileUpload control in the static WebMethod.
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'UserProfile.aspx/EditProfile',
data: "{'file':'" + document.getElementById('FileUpload1').files[0] + "'}",
async: true,
success: function (response) {
$('#dialog-form').dialog("close");
}
});

Don't attempt to send the data as JSON, send it as formdata with FormData and you can read the file on the server side as if you used a regular form to upload the file.
var data = new FormData();
data.append('file', document.getElementById('FileUpload1').files[0]);
$.ajax({
type: 'POST',
url: 'UserProfile.aspx/EditProfile',
data: data,
async: true,
processData: false,
contentType: false,
success: function (response) {
$('#dialog-form').dialog("close");
}
});