I am trying to add images, few string information and array using formData. I can successfully add images, string but can't add array information while adding. It always passes array as a string.Any help would be appreciated. My code
var reader = new FileReader();
var form_data = new FormData();
form_data.append('departure_city',departure_city);
form_data.append('inclusion_icons', inc_icons);
form_data.append('theme_icons',theme_icons);
$.ajax({
url: url,
type: "POST",
async: false,
cache: false,
contentType: false,
processData: false,
enctype: 'multipart/form-data',
data: form_data,
}).done(function (data) {
console.log("Success");
console.log(data);
}).fail(function (data) {
console.log("Error");
console.log(data);
});
inclusion_icons and theme_icons are arrayz, however I'm getting them as a string.
Related
In my js class, I am sending form data via ajax to the php that is fine but I have an array which doesn't belong to that form how can I send it with form data
$("#formed").unbind('submit').bind('submit', function() {
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data:new FormData(this),
dataType: 'json',
cache: false,
contentType: false,
processData: false,
async: false,
success: function(response) { }
});
});
Now there is array
var myList = new Array();
It doesn't belong to form but I want to send it making a json array with above ajax call?
ANY SOLUTION!!!!!
you can use this function formData.append(name, value);
$("#formed").unbind('submit').bind('submit', function() {
var data = new FormData(this);
var myList = [];
// add your data here
// to send an array as data you should convert it to the string
data.append('testField', JSON.stringify(myList));
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data:data,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
async: false,
success: function(response) { }
});
});
I am trying to upload an image using ajax using the following code:
function saveToServer(file) {
const fd = new FormData();
fd.append('image', file);
$.ajax({
method: 'post',
data: {
image: fd,
diaryHash: "{{ $diary->hash }}",
entryHash: "{{ $entry->hash }}",
},
processData: false,
contentType: false,
url: "{{ action('EntriesController#storeImage') }}",
success: function(data, textStatus, jqXHR){
const url = JSON.parse(xhr.responseText).data;
insertToEditor(url);
}
});
}
I am passing the image to be stored and I am passing two other variables, diaryHash and entryHash.
I am not getting my passed variables in my controller because processData is set to false.
How do I pass data along with an image when doing an image upload with AJAX?
The issue is because you're placing the FormData object in the object to be serialised. You need to invert that logic and place the additional parameter inside the FormData, like this:
function saveToServer(file) {
const fd = new FormData();
fd.append('image', file);
fd.append('diaryHash', '{{ $diary->hash }}');
fd.append('entryHash', '{{ $entry->hash }}');
$.ajax({
method: 'post',
data: fd,
processData: false,
contentType: false,
dataType: 'json',
url: "{{ action('EntriesController#storeImage') }}",
success: function(data, textStatus, jqXHR){
const url = data.data;
insertToEditor(url);
}
});
}
Also note that I added the dataType property to the request so that jQuery will automatically deserialise the response for you.
I'd like to pass a PHP session variable (called 'profileid') using FormData and AJAX. I thought this below would work, it did not. Why?
var imageData = new FormData();
imageData.append('image', $('#uploadImage')[0].files[0]);
imageData.append('profileid', <?php echo $_SESSION['profileid'];?>);
//Make ajax call here:
$.ajax({
url: '/upload-image-results-ajax.php',
type: 'POST',
processData: false, // important
contentType: false, // important
data: imageData,
//leaving out the rest as it doesn't pertain
You could add the profileid in the $.ajax URL parameter instead of adding it in FormData:
$(document).ready(function (e) {
$('#uploadImageForm').on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: "/upload-image-results-ajax.php?profileid=<?= $_SESSION['profileid']; ?>",
type: "POST",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(response){
console.log("success");
console.log(response);
},
error: function(response){
console.log("error");
console.log(response);
}
});
}));
$('#uploadImage').on("change", function() {
$("#uploadImageForm").submit();
});
});
Don't forget to place session_start(); at the beginning of your code.
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)
}
})
}
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");
}
})