Nishita Patel Nishita Patel - 5 months ago 79
Ajax Question

how to i pass data of registration form and upload image in registration form with validation and through ajax in codeigniter

I am making a single registration form with all the data and input tags I need and pass that data to the next page via AJAX. But I do not get my image upload value to the next page. Please help me find a solution regarding

ajaxfileupload.js
and
validation.js
and tell me how to store image in a database using codeigniter.

<script src="<?php echo JS_PATH;?>jquery-validation.js"></script>


javascript:

$(document).ready(function() {
$("#registration_form").validate({
rules: {
name: {
required: true
},
surname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
}
},
messages: {
name: {
required: "Please enter your name"
},
surname: "Please enter your surname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
}
},
submitHandler: submitForm
});

function submitForm() {
var name = $('#name').val();
var surname = $('#surname').val();
var age = $('#age').val();
var dob = $('#datepicker').val();
var ph_no = $('#ph_no').val();
var gender = $('input[type="radio"]:checked').val();
var hobbies = new Array();
$('input[name="hobbies[]"]:checked').each(function() {
hobbies.push(this.value);
});
var city = $('#city').val();
var email = $('#email').val();
var pwd = $('#password').val();
var photo = $("#userfile").val();
$.ajax({
url: "<?php echo SITE_ROOT;?>Registration/insertdata",
type: "POST",
data: {
username: name,
user_surname: surname,
user_email: email,
password: pwd,
user_age: age,
user_dob: dob,
user_ph_no: ph_no,
user_gender: gender,
user_hobbies: hobbies,
user_city: city,
user_photo: photo
},
success: function(data) {
alert(data);
}
}
});
}


html:

<form method="post" enctype = "multipart/form-data" >
<label> File Input: </label>
<input type="file" name="userfile" id="userfile">
<input type="submit" name="submit" value="Submit" />
</form>


php controller:

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Registration extends CI_Controller
{
function __construct() {
parent::__construct();
$this->load->model('menupages/registration_model');
}

public function index() {
$this->first();
}

function first() {
$data['title'] = "Registration Page";
$this->load->view('menupages/registration', $data);
}

function insertdata() {
$file = $_POST['user_photo'];
print_r($file);
exit();
$config['upload_path'] = '/var/www/html/upload/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '100';
$config['file_name'] = $file;
$this->load->library('upload'); //initialize
$this->upload->initialize($config);
if ( ! $this->upload->do_upload('userfile')) {
$error = array('error' => $this->upload->display_errors());
print_r($error);
exit();
} else {
$data = array('upload_data' => $this->upload->data());
print_r($data);
exit();
}
}
}

Answer

Make use of FormData() on javascript.


data = new FormData();

data.append('name', $('#name').val());
data.append('surname', $('#surname').val());
data.append('age', $('#age').val());
data.append('dob', $('#datepicker').val());
data.append('ph_no', $('#ph_no').val());
data.append('gender', $('input[type="radio"]:checked').val());

//for Photo
data.append('photo', $('#userfile')[0].files[0]);


//AJAX
$.ajax({
            url: "<?php echo SITE_ROOT;?>Registration/insertdata",
            data: data,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                console.log(data)
            }
        });

PHP CODE: To test if you successfully passed file and post data on php:

print_r($_FILES); print_r($_POST);

Comments