I'm Trying to upload multiple images via post AJAX method, but if I upload more than 2 pictures, I get empty array response from PHP, but with 1 or 2, and sometimes 3 images, I get successful response! data is passed successfully to PHP all times, but response is like mystery !
my ajax
var id=data;
var file_data=$('#images').prop('files');
var formData = new FormData();
for(var x in file_data){
formData.append("image["+x+"]", file_data[x]);
}
formData.append("id", id);
$.ajax({
url: "ajax/ajax_add_car.php?veids=2",
enctype: "multipart/form-data",
method: "POST",
data: formData,
cache:false,
processData: false,
contentType: false,
success: function(data){
console.log(data);
},
})
mine PHP response:
foreach($_FILES as $lolz){
print_r($lolz);
}
print_r($_POST);
Related
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 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,
});
I'm trying to do a file upload through ajax and php. The PHP works fine when called directly, but each time I call it through ajax it is failing. I'm not getting any errors (annoying) it just does not want to upload.
My JQUERY looks like
$('.fileUpload').on('click', function(){
var file_data = $('#medical').prop('files')[0];
console.log(file_data);
var form_data = new FormData();
form_data.file = file_data;
console.log(form_data);
var fileType = $(this).parent().find('input[type="hidden"]').val()
console.log(fileType);
$.ajax({
url: '/docs/upload.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
fileType:fileType,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data){
$('.message').html(data) // display response from the PHP script, if any
}
});
});
and my PHP looks like
$file_upload="true";
$file_up_size=$_FILES['file_up'][size];
print_r($_FILES[file_up]);
if ($_FILES[file_up][size]>250000){$msg=$msg."Your uploaded file size is more than 250KB
so please reduce the file size and then upload.<BR>";
$file_upload="false";}
$file_name=$_FILES[file_up][name];
$add="medicalPaperwork/$file_name"; // the path with the file name where the file will be stored
if($file_upload=="true"){
if(move_uploaded_file ($_FILES[file_up][tmp_name], $add)){
echo "Thank god!";
}else{echo "Fuck you.";}
}else{
echo $msg;
}
What am I doing wrong? I'm going crazy trying to figure this out.
edit: the content of the form_data
You are using FormData incorrectly, use append to set the fields you want to upload
$('.fileUpload').on('click', function(){
var file_data = $('#medical').prop('files')[0];
console.log(file_data);
var form_data = new FormData();
var fileType = $(this).parent().find('input[type="hidden"]').val()
form_data.append('file_up', file_data);
form_data.append('fileType', fileType);
console.log(form_data);
console.log(fileType);
$.ajax({
url: '/docs/upload.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data){
$('.message').html(data) // display response from the PHP script, if any
}
});
});
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.
I'm testing out sending a formData object to PHP (I am following http://net.tutsplus.com/tutorials/javascript-ajax/uploading-files-with-ajax/), but am having some difficulty getting it off the ground. First, the formData object is created and populated with:
var formdata = new FormData();
formdata.append('my_key','my_value');
Then my ajax call with jQuery is:
$.ajax({
url: 'php_upload.php',
type: 'POST',
cache: false,
data: formdata,
processData: false,
contentType: false,
success: function (response) {
console.log(response);
}
});
With the php_upload.php file containing:
<?php
echo $_FILES['my_key']['name'];
?>
But I get an undefined index: my_key error in the console.
Anyone have any idea what I might be doing wrong? Been scratching my head for ages.
You haven't added any files to the FormData, just a string which can be accessed by $_POST['my_key'].
To pass a file the second parameter of FormData.append has to be a FILE or a BLOB.