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
Related
I am trying to upload file through jquery formdata without any form. My problem is that it is not sending any data to php file.
Here is my jquery code
jQuery(document).ready(function() {
jQuery('#e_picture').change(function() {
var file_data = jQuery('#e_picture').prop('files')[0];
var form_data = new FormData();
form_data.append('e_picture', file_data);
form_data.append('e_uid', '3585');
//});
// data: {e_uid: e_uid, e_picture:'23'},
jQuery.ajax({
url: "index.php?option=com_objectified&task=course_reg.addPicture",
type: 'POST',
data: {
form_data
},
processData: false,
contentType: false,
success: function(result) {
alert('This is ' + result); // Here I show onlu e_uid but it alerts blank result
}
});
});
});
Html
<input type="file" class="form-control" name='e_picture' id='e_picture'>
You are sending the form_data in wrong way
instead of
data: {
form_data
},
just send it like
data: form_data,
jQuery(document).ready(function() {
jQuery('#e_picture').change(function() {
var file_data = jQuery('#e_picture')[0].files;
var form_data = new FormData();
form_data.append("e_picture[]", file_data[0]);
form_data.append('e_uid', '3585');
//});
// data: {e_uid: e_uid, e_picture:'23'},
jQuery.ajax({
url: "index.php?option=com_objectified&task=course_reg.addPicture",
type: 'POST',
data: {
form_data
},
processData: false,
contentType: false,
success: function(result) {
alert('This is ' + result); // Here I show onlu e_uid but it alerts blank result
}
});
});
});
ange content type to :
contentType: 'multipart/form-data',
I am trying to display this "echo $_FILES['userfile']['name'];" on browser console but unfortunately I got this "function File() { [native code] }"
Here is my jquery code
<?= form_open_multipart('',' id="importform" method="POST" ');?>
<div><input type="file" name="userfile"></div><button type="submit>upload</button>
var formdata = new FormData();
formdata.set('userfile',$('input[name="userfile"]')[0].files[0],File);
$.ajax({
url:'http://localhost/selection/index.php/CI_Inner/importResult',
type: 'POST',
dataType: 'html',
contentType: false,
processData: false,
data: formdata,
success: function(data){
console.log(data);
}
Try this
function uploadImage() {
// send the formData
var formData = new FormData( $("#userfile")[0] );
if (typeof formData !== 'undefined') {
$.ajax({
url : 'http://localhost/selection/index.php/CI_Inner/importResult', // Controller URL
type : 'POST',
data : formData,
async : false,
cache : false,
contentType : false,
processData : false,
success : function(data) {
successFunction(data);
}
});
} else {
message("Your Browser Don't support FormData API! Use IE 10 or Above!");
}
}
Note: instead of 'http://localhost/selection/index.php/CI_Inner/importResult' using direct URL baseUrl + 'importResult',
example: url :
'http://localhost/selection/index.php/CI_Inner/importResult',
url: baseUrl + 'importResult',
Eventually I solved this by just removing the parameter 'File' from my code below
var formdata = new FormData();
formdata.set('userfile',$('input[name="userfile"]')[0].files[0],**File**);
$.ajax({
url:'http://localhost/selection/index.php/CI_Inner/importResult',
type: 'POST',
dataType: 'html',
contentType: false,
processData: false,
data: formdata,
success: function(data){
console.log(data);
}
And now it works fine with the code below
var formdata = new FormData();
formdata.set('userfile',$('input[type=file]')[0].files[0]);
$.ajax({
url : 'http://localhost/selection/index.php/CI_Inner/importResult',
type: 'POST',
dataType: 'html',
contentType: false,
processData: false,
data: formdata ,
success: function(data){
console.log(data);
}
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 am trying to upload firstname, lastname, description and image path to MySql database. And move uploaded image to specific folder.
Here is my ajax function
formData = new FormData(addPeopleForm);
var file_data = $('input[type="file"]')[0].file;
formData.append("file", file_data);
$.ajax({
type: "POST",
url: "functions.php",
contentType: false,
cache: false,
processData: false,
data: {
function: "savepeople",
data: formData
}, success: function(data){
console.log(data);
getPeople();
}
});
functions.php
if(isset($_POST['function'])){
$f = $_POST['function'];
if($f == "savepeople"){
require_once("config.php");
echo $_POST['firstname'];
.
.
.
you can not send directly image to php file with ajax call, you have to take form enctype="multipart/form-data" while form defination
and replace this code for file upload while ajax call
for appending file in formdata use below code
formData = new FormData(); //your form name
var file_data = $('input[type="file"]')[0].file;
formData.append("file", file_data);
formData.append("function","savepeople"); // new variable for your php condition
$.ajax({
url: "YOUR_FILE_PATH",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
// success operation here
},
and on php side you have to use $_FILES['YOUR_FILE_NAME'] instead of $_POST['YOUR_FILE_NAME'] for accessing a uploaded file on server.
you can try this code
$.ajax({
type:'POST',
url:'functions.php',
data:new FormData($('#my_form')[0]),
cache: false,
contentType: false,
processData: false,
success:function(msg)
{
console.log(msg);
}
});
return false;
where #my_form is your form id
var formData = new FormData($(this)[0]);
var action = "savepeople";
$.ajax({
url : 'functions.php',
type : 'POST',
data: {action:action,formData:formData},
contentType: false,
cache: false,
processData:false,
async : false,
, success: function(data){
console.log(data);
getPeople();
}
});
functions.php
if(isset($_POST['action']) && $_POST['action'] == "savepeople"){
//TO DO CODE
}
send $username php with data: new FormData(this), to add.php like data: new FormData(this),$username how can i do it with ajax code
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadFormuserimg").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "add.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#user_img_a").html(data);
},
error: function()
{ alert("error");
}
});
}));
});
</script>
var myData = new FormData(this);
myData.append('username','<?php echo $username; ?>');
and get on "add.php" like this
$username = $_POST['username'];
This worked on my side.
Based on comments to the question, specifically:
I just want to add some data
Are you just asking how to add more fields to the object that was created already in the data value? Something like this:
var myData = new FormData(this);
myData.append("anotherField", "anotherValue");
// etc.
Then just use that variable as your AJAX data:
$.ajax({
url: "add.php",
type: "POST",
data: myData,
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#user_img_a").html(data);
},
error: function()
{ alert("error");
}
});
You can store anything you like in a variable and use that variable at a later time. With a FormData object you would generally use .append() to add more key/value pairs to it.