I need help on how to output the image and image data using php when uploaded using the code below or in other words how to handle upload with PHP
function uploadFile(blobFile, fileName) {
var fd = new FormData();
fd.append("fileToUpload", blobFile);
$.ajax({
url: "upload.php",
type: "POST",
data: fd,
processData: false,
contentType: false,
success: function(response) {
// .. do something
},
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage); // Optional
}
});
}
You can use the success function to query for the image that was just uploaded. Then you can append the image to the spot on the page where you want it to be displayed.
See ajax
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
}
});
});
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);
}
});
});
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);