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?
Related
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>`);
}
});
I believe I am making a very basic mistake somewhere.
I have a Form I want to transmit to a PHP page. I also want to send a parameter with that information so I have created a basic 2D array:
$fd['api'] -> contaning the parameter as a string
$fd['body'] -> containing the form data
I am struggling to transmit this array "$fd" as a json string and believe I am using the javascript syntax incorrectly somewhere as I do not often use Javascript.
Any Help would be appreciated.
function admin_statistics_form_send(){
var fd = []
fd['api'] = "refresh_all"
fd['body'] = new FormData(document.getElementById("admin_statistics_form"))
var jsonstring = fd
console.log(jsonstring)
$.ajax({
async: true,
beforeSend: function(){
},
url: "admin_statistics_api.php",
type: "POST",
data: jsonstring,
dataType: "json",
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function (data) {
console.log(data)
},
error: function(data) {
console.log(data)
}
})
}
You only want to send the FormData object. To add other key/value pairs you append to that object:
function admin_statistics_form_send(){
var fd = new FormData($("#admin_statistics_form")[0]);
fd.append('api',"refresh_all");
$.ajax({
//async: true, // redundant since it is default and should never use `false`
beforeSend: function(){
},
url: "admin_statistics_api.php",
type: "POST",
data: fd,
dataType: "json",
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success: function (data) {
console.log(data)
},
error: function(data) {
console.log(data)
}
})
}
How do I add an accept header 'text/xml' in JQuery ajax file upload?
It will upload a PDF file.
Here is the code I am using:
var fd = new FormData(document.getElementById('file'));
$.ajax({
url: '/myurlhere',
type: 'POST',
data: fd,
cache: false,
contentType: false,
processData: false,
success: function(response) {
console.log('success... '+response);
}
}).fail(function(xhr,status,error) {
console.log(error);
});
The server expects the accept header to be xml, so causes a 406 error.
I have tried using dataType: 'xml' or header { Accept: 'text/xml' } and it causes a 400 error.
You have to set your contentType to "text/xml".
Change your call like this:
var fd = new FormData(document.getElementById('file'));
$.ajax({
url: '/myurlhere',
type: 'POST',
data: fd,
cache: false,
contentType: "text/xml",
dataType: "text",
processData: false,
success: function(response) {
console.log('success... '+response);
}
}).fail(function(xhr,status,error) {
console.log(error);
});
see this SO answer it may help
jQuery ajax post to web service
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
}
});
}
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");
}
});