codeigniter file upload using AJAX - php

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);
}
}

Related

jQuery post form with static value from funnction attributes

I have a funnction to post and recive form to another php file. I don't know why, but the php file has return empty array.
the function has two attributes "name" and "arg" and wants to send these two values ​​to the file steel_th_dynamic_query.php, then display what it returns in the div "demo". I think the problem is on the line data: { but I don't know why it doesn't work.
function displayPhrase(name, arg){
//document.getElementById("demo").innerHTML = name + ' ARG: ' + arg;
$.ajax({
url: './modules/settings/steel_th_dynamic_query.php',
data: {
MyData: name,
MyARG: arg
},
processData: false,
contentType: false,
type: 'POST',
success: function(data){
document.getElementById("demo").innerHTML = data;
}
});
}
You need to remove the processData and contentType properties, or at least set them back to their default values. Setting them to false is only required when sending binary data in the request, ie. a FormData object.
function displayPhrase(name, arg) {
$.ajax({
url: './modules/settings/steel_th_dynamic_query.php',
type: 'POST',
data: {
MyData: name,
MyARG: arg
},
success: function(data) {
$("#demo").html(data);
}
});
}

How to POST dataform data and other datas through a single ajax call

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
}
});

how to deal with images in Codeigniter [duplicate]

This question already has answers here:
Ajax Upload image
(6 answers)
Closed 8 months ago.
In Codeigniter by using ajax i am adding record to (products) and everything is working fine so i decided to add (image) field , and for some reason it's no longer adding any record to database
and i add input type=file to my form
<input type="file" name="image">
and i add this to my controller
$image = $this->input->post('image');
$data = array('title'=>$title,'description'=>$description,'price'=>$price,'quantity'=>$quantity,'image'=>$image);
but when i remove $image = $this->input->post('image'); it gets to work again
just in case this is my ajax code
var postData = $(this).serialize();
$.ajax({
type:'post',
url: baseURL+"admin/Products/add_product",
data:postData,
dataType:'json',
success:function(data){
}
});
any ideas how to solve it?
Hope this will help you :
Your ajax should be like this :
var formdata = new FormData();
$.ajax({
type: 'POST',
url: baseURL+"admin/Products/add_product",
data: formdata,
cache: false,
contentType: false,
processData: false,
success: function(response)
{
alert(response);
}
});
In controller accessing image using $_FILES super variable
public function add_product()
{
print_r($_FILES);
print_r($this->input->post());
exit;
}
Note : make sure URL path is correct , see ur network tab to see the output
For more : https://www.formget.com/ajax-image-upload-php/
May Be You can use instead of baseURL
var formdata = new FormData();
$.ajax({
type: 'POST',
url: <?=base_url()?>+"admin/Products/add_product",
data: formdata,
cache: false,
contentType: false,
processData: false,
success: function(response)
{
alert(response);
}
});

Basic jQuery Ajax file upload with PHP

I've been trying to get a basic file upload through an ajax form without success. I'm looking for the bare minimum basics and nothing I have found through searching has worked.
I've been messing about with this for about 8 hours and have tried at least a dozen different methods but have not been able to get anything successfully uploaded.
I have narrowed down my code to the most bare necessities as best I can.
My JavaScript goes like this:
function uploadFile(param) { //Upload File
$.ajax({
url: "modules/upload/upload.php",
type: "post",
data: new FormData($(param)[0]),
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
}
});
}
which is called with:
$(".app-canvas").on('change', ".fileUpload", function () {
uploadFile($(this));
});
and the PHP:
<?php
$sourcePath = $_FILES['driver_licence_image']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "uploads/".$_FILES['driver_licence_image']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
?>
FormData takes an HTMLFormElement as an argument to its constructor, you're passing what looks a file input. To add a file from a form element you have to use append.
$(".app-canvas").on('change', ".fileUpload", uploadFile);
function uploadFile() { //Upload File
var fd = new FormData();
fd.append('driver_licence_image', this.files[0]);
$.ajax({
url: "modules/upload/upload.php",
type: "post",
data: fd,
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
}
});
}
p.s. $(param)[0] is equivalent to param(when param is a dom node), so please don't do that.

PHP Ajax Post File and Text Same Time

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,
});

Categories