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);
}
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 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
}
<input type='file' name='inputfile' id='inputfile'>
I'm trying to upload an image without a form submitting - just after input file is changed:
$('#inputfile').change(function(){
$.ajax({
url: "pro-img-disk.php",
type: "POST",
data: new FormData('#inpufile'),
contentType: false,
cache: false,
processData:false,
success: function(data){
console.log(data);
}
});
});
PHP
$src = $_FILES['inputfile']['tmp_name'];
$targ = "../images/".$_FILES['inputfile']['name'];
move_uploaded_file($src, $targ);
Error:
Undefined index: inputfile...
Any help?
See to the following changes:
<input type='file' name='inputfile' id='inputfile'>
Here's how you should have sent the ajax request:
$(document).ready(function() {
$('#inputfile').change(function(){
var file_data = $('#inputfile').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: "pro-img-disk.php",
type: "POST",
data: form_data,
contentType: false,
cache: false,
processData:false,
success: function(data){
console.log(data);
}
});
});
});
And lastly, here's how you should have processed the form data:
$src = $_FILES['file']['tmp_name'];
$targ = "../images/".$_FILES['file']['name'];
move_uploaded_file($src, $targ);
Try this:
var file_data = $('#inputfile').prop('files')[0];
var form_data = new FormData(); // Create a form
form_data.append('inputfile', file_data); // append file to form
$.ajax({
url: "pro-img-disk.php",
type : 'post',
cache : false,
contentType : false,
processData : false,
data : form_data,
success : function(response){
alert(response);
}
});
in php you can get the file data like:
$_FILES['inputfile']
i'm having a problem sending the option selected with ajax.
Code:
$("#editarConta").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "includes/php/class_conta.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(resultado){
$("#accountEdit_result").html(resultado);
}
});
}));
Sending this data i can't see what option was selected. Is any way i can send this data, plus the selected option like:
data: { new FormData(this) , optionSelected: $( "#linguagem_favorita option:selected" ).val() },
My select HTML code:
<select name="linguagem_favorita" id="linguagem_favorita" class="form-control">
If i send with my code i get NULL when i var_dump the variable
var_dump($_POST["linguagem_favorita"]);
Append to the form data:
$("#editarConta").on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append("optionSelected", $("#linguagem_favorita option:selected" ).val() );
$.ajax({
url: "includes/php/class_conta.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(resultado){
$("#accountEdit_result").html(resultado);
}
});
}));