I can post only image and get it with $_FILES['foto']['name']. I need post image and text same time.
var fotoFile = new FormData();
$('#foto').on('change', function (evt) {
var files = evt.target.files;
if (files.length > 0) {
fotoFile.append("foto", files[0]);
}
});
It is post code
` $.ajax({
url: 'postpages/personelsave.php',
dataType: 'text',
type: 'post',
cache: false,
contentType: false,
processData: false,
data: {foto : fotoFile, tc_no : document.getElementById('tcNo').value},
success: function(php_script_response){
alert(php_script_response);
}
});`
and personelsave.php
$_FILES['foto']['type']
$_POST["tc_no"]
Error : undefined index foto.
What is wrong with it?
You can't use multiple dataTypes, if you use JSONP this will return a jsonp block which you could use to call a callback to handle the return data like this:
Basic example of using .ajax() with JSONP?
So through JSONP you can handle multiple dataTypes.
Just use below to submit all types of input data including file
var formData = new FormData($("#formID")[0]);
$.ajax({
type: "POST",
url: 'postpages/personelsave.php',
data: formData,
processData: false,
contentType: false,
});
Related
I have to submit data with attachment using java scripts and PHP, my problem is that I cant pass data and attachment to php page. here is my codes;
In my HTML i did not use
function kk_sendmail()
{
var kk_vtype= $("#vtype").val();
var kk_departm= $("#departm").val();
var kk_recepient= $("#recepient").val();
var kk_user= $("#euser").val();
var kk_smssubject= $("#smssubject").val();
var kk_compose_textarea= $("#compose-textarea").val();
var form_data = new FormData();
form_data.append('attach', $('#attachments').prop('files')[0]);
form_data.append('vtype',kk_vtype);
form_data.append('departm',kk_departm);
form_data.append('recepient',kk_recepient);
form_data.append('euser',kk_user);
form_data.append('smssubject',kk_smssubject);
form_data.append('compose-textarea',kk_compose_textarea);
$.ajax({
type: "POST",
url: "process.php",
dataType: 'text',
cache: false,
contentType: false,
processData: false,
data: form_data,
success : function(text){
if (text == "success"){
formSuccess();
} else {
console.log('Failed message');
}
}
});
};
you do not need to define the dataType and also you can use
enctype: "multipart/form-data",
$('#attachements')[0].files[0] // for file
It will help
I got struck in a point where i have to pass dataForm data's and other datas through a single ajax call, Actually am passing a Blob data by creating a DataFrom object Following code will give you a exact explanation
my ajax call with data's
Fr.voice.export(function(blob){
var data = new FormData();
data.append('file', blob);
console.log(blob);
$.ajax({
url: "upload1.php",
type: 'POST',
data: data,
contentType: false,
processData: false,
success: function(data) {
// Sent to Server
}
});
}, "blob");
In the above Ajax call am POSTing only the blob data where as i have to pass other data's like
id: student_id,
test_no: test_no,
attempt_no: attempt_no,
question_name: "audio" + audioNo.
What i have tried
Fr.voice.export(function(blob){
var data = new FormData();
data.append('file', blob);
console.log(blob);
var postData = {
"audio": base64,
"id": student_id,
"test_no": test_no,
"attempt_no": attempt_no,
"question_name": "audio" + audioNo
};
$.ajax({
url: "upload1.php",
type: 'POST',
data: {data,postData},
contentType: false,
processData: false,
success: function(data) {
// Sent to Server
}
});
}, "blob");
Am getting [object,object] while am posting the data.
Am new to php and Ajax call, please help me to solve this. Thank you in advance.
Have you tried it like this:
$.ajax({
url: "upload1.php",
type: 'POST',
data: { data: dataVar, postData: postDataVar},
contentType: false,
processData: false,
success: function(data) {
// Sent to Server
}
});
I've been searching for a solution to upload files using Ajax when the input field is not inside a form tag. I have already tried this solution.
This is my HTML
<span id="user-image-up-btn">Last opp bilde</span>
<input id="user_image_upload" type="file" />
This is my code, and I get the return TypeError: undefined is not an object (evaluating '$("#user_image_upload").files') or when I use alternative number 2, I get Object, object.
This is my jQuery
// IMAGE UPLOAD
$("#user_image_upload").change(function() {
var fileform = new FormData();
fileform.append('pictureFile', $("#user_image_upload").files[0]);
$.ajax({
url: '/userimageupload',
type: 'POST',
processData: false,
contentType: false,
dataType : 'json',
data: fileform,
beforeSend: function(){
$("#user-image-up-btn").html('Laster opp...');
console.log(fileform);
},
success: function(data){
$("#user-image-up-btn").html('Last opp bilde');
console.log(fileform);
},
error: function(exception){
alert('error:'+exception);
console.log(fileform);
}
});
});
EDIT:
By using the answer from Adeneo I managed to upload the files. However, I still get error:[object Object], which causes the rest of the form to fail. How come?
A jQuery object has no files property, that would be the underlying DOM node
$("#user_image_upload").on('change', function() {
var fileform = new FormData();
fileform.append('pictureFile', this.files[0]);
$.ajax({
url: '/userimageupload',
type: 'POST',
processData: false,
contentType: false,
dataType : 'json',
data: fileform,
beforeSend: function(){
$("#user-image-up-btn").html('Laster opp...');
},
success: function(data){
$("#user-image-up-btn").html('Last opp bilde');
},
error: function(exception){
alert('error:'+exception);
}
});
});
hello i have this function using AJAX. i need to retrieve the file's name size type and i will have to save it to my database..
here is my code.
function UploadImage() {
var data = new FormData($('#fileName'));
Jquery.each($('#fileName')[0].files, function(i,file) {
data.append(i,file);
}
$.ajax({
type: 'post',
data: data,
url: 'controller/function',
cache: false,
ContentType: false,
ProcessData: false,
success: function(data) {
alert(data);
}
}
when i will retrieve the data coming from the ajax request through my controller, i cant get the data of the files using _$Files[] it has error saying undefined index.
This may work for you
function UploadImage()
{
var data = new FormData(document.getElementById("fileName"));//remember fileName is your form id.
//You dont need this
/*Jquery.each($('#fileName')[0].files, function(i,file) {
data.append(i,file);
}*/
//you don't need to modify the data. data already contains whole form information.
$.ajax({
type: 'post',
data: data,
url: 'controller/function',//better use full path instead of relative path
cache: false,
ContentType: false,
ProcessData: false,
success: function(data) {
alert(data);
}
}
This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 years ago.
I am getting an array returned from PHP which I json_encode() in php first and I echo that array. I get the array with an AJAX request disabling "Async". I know I shouldn't use that but it was the only way I could find.
It returns me this:
{"id":"38","name":"111111111111111111111111111111111111111111111.jpg"}
And this is my AJAX request:
function uploadFile(file){
var formData = new FormData();
formData.append('formData', file);
$.ajax({
url: 'inc/ajax/uploadFile.php', //Server script to process data
type: 'POST',
data: formData,
contentType: false,
processData: false,
async: false,
//Ajax events
success: function(html){
strReturn = html;
}
});
return strReturn;
}
When I do this I get the whole array:
var img = uploadFile(file);
console.log(img);
But when I call "img.name" or img.id" it says undefined.
You're receiving back a JSON string representation of an object. Tell jQuery that you're expecting JSON, so that it parses it into an actual Javascript object for you:
data: formData,
dataType: 'json', // Add this line
You need set dataType to json and you should use a callback you are probably returning strReturn before it is populated.
function uploadFile(file,callback){
var formData = new FormData();
formData.append('formData', file);
$.ajax({
url: 'inc/ajax/uploadFile.php', //Server script to process data
type: 'POST',
data: formData,
contentType: false,
processData: false,
dataType: "json",
//Ajax events
success: function(html){
strReturn = html;
callback(strReturn);
}
});
}
uploadFile(file,function(img){
console.log(img.name);
});
Try this:
function uploadFile(file){
var formData = new FormData();
formData.append('formData', file);
$.ajax({
url: 'inc/ajax/uploadFile.php', //Server script to process data
type: 'POST',
data: formData,
contentType: false,
dataType: "json",
processData: false,
//Ajax events
success: function(html){
strReturn = html;
return strReturn;
}
});
}
It says undefined because the strReturn is not defined at the moment you return it. The ajax's success method is called with a delay of some milliseconds so you have to return your variable after the ajax is finished.