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

Posting data with jQuery in Wordpress succeeds, but fails with FormData

I want to upload a file using jQuery/Ajax in my Wordpress plugin. The javascript to PHP call works. So the wiring etc. works. But as soon as I post the formData, necessary to post the files, I don't reach the PHP function any more.
The javascript,
var doesntWork = new FormData();
doesntWork.append('file', 'a name');
var withthisItWorks = 'text'
var data = {
'action': 'emfi_file_upload',
'data': doesntWork
}
$.ajax({
type: "POST",
url: ajax_object.ajaxurl,
data: data,
success: function(response) {
jQuery('#emfi-message').html(`<span style="color: green;">Respons: ${response}</span>`);
}
});
The PHP function just returns a string answer:
function emfi_file_upload_callback() {
echo 'Yes, in the callback';
wp_die();
}
When I put the plain text in my data object I get answer from the PHP function. When I put the formData in, there is no answer. I've tried a lot of examples on the internet, but it boils down to this every time. Adding contentType: false and processData: false, as was mentioned somewhere else, didn't help. What's wrong?

All fields that are being sent must be in the formdata object.
Additionally for FormData to work with jQuery.ajax, processData and contentType have to be set to false.
var doesWork = new FormData();
doesWork.append('file', someFile);
doesWork.append('action', 'emfi_file_upload');
$.ajax({
type: "POST",
url: ajax_object.ajaxurl,
data: doesWork,
contentType: false,
processData: false,
success: function(response) {
jQuery('#emfi-message').html(`<span style="color: green;">Respons: ${response}</span>`);
}
});

FormData not working in IE

I have to upload an image onto the ColdFusion server. I have used FormData for the AJAX request to pass image file. It works fine for FF and chrome but gives issues in IE and the form does not get posted.
Is there any alternative way to do so? So that it works fine for FF, Chrome, IE8+.
var formData = new FormData($(obj)[0]);
var actionPage = $(obj).attr('action');
if (validForm) {
$('.mainPage').html('<div style="padding-top:20px;" align="center"><img alt="loading" src="/rpnet/images/ajax-loader.gif" /></div>');
$.ajax({
url: actionPage,
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
$('.mainPage').html(returndata);
}
});
}
return false;
This is the code I have used for posting the form.

JQuery ajax call on same domain not sending cookies when data is sent

I am trying to test whether we can convert our existing file upload form into a more ajax/html5 without changing much of the backend. So here is what I am doing on the test:
function sendFile() {
var data = new FormData();
var file = $('input[type=file]').get(0).files[0];
data.append("file1",file);
$.ajax({
type: 'post',
url: '/upload.jsp',
data: data,
contentType: 'multipart/form-data',
processData: false
});
}
So the file sending part is not the problem. The problem is that I am not getting any of my cookies. If I take the data: data param out then it sends the cookies just fine.
Any idea why?
Thanks.

You need to set the withCredentials $.ajax() setting:
function sendFile() {
var data = new FormData();
var file = $('input[type=file]').get(0).files[0];
data.append("file1",file);
$.ajax({
type: 'post',
url: '/upload.jsp',
data: data,
contentType: 'multipart/form-data',
processData: false,
xhrFields: {
withCredentials: true
}
});
}

Two JQuery Ajax Call on same page

I am uploading two different type of file with ajax by using two different function. The problem is->the timeout which is set for the first request has been set for other request also.. so if first file is too large and take almost 2 mins for uploading, then next file which is an image of very small size uploaded by next ajax request with a different time out will be also take same 2 mins for uploading..
here i am uploading file directly to amazon.
Below is the ajax function to upload my second file with a small timeout
xhr_request1=$.ajax({
url: 'uploader.php', //server script to process data
type: 'POST',
//Ajax events
beforeSend: function(){beforeSendHandler(fileLoading);},
success: function(response) {completeHandler(response,fileName,fileLoading,filePreview,fileUpload,filename);},
// error: function(xhr,tStatus,err ) {errorHandler(err,fileLoading,filePreview);},
// Form data
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false,
timeout:50000
});
and below is next function to upload large files
xhr_request2=$.ajax({
url: 'contentuploader.php', //server script to process data
type: 'POST',
//Ajax events
beforeSend: function(){beforeSendHandler1(fileLoading1);},
success: function(response) {completeHandler1(response,fileName1,fileLoading1,filePreview1,fileUpload1,filename1);},
// error: function(xhr,tStatus,err ) {errorHandler(err,fileLoading,filePreview);},
// Form data
data: formData,
//Options to tell JQuery not to process data or worry about content-type
cache: false,
contentType: false,
processData: false,
timeout:1000000
});

you make manually object of form data as your required parameter
var fd = new FormData();
fd.append( 'file', input.files[0] );
$.ajax({
url: 'http://example.com/script.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
You can follow this link
1.) How to send FormData objects with Ajax-requests in jQuery?