Nishita Patel Nishita Patel - 1 year ago 169
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

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

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


$(document).ready(function() {
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() {
var city = $('#city').val();
var email = $('#email').val();
var pwd = $('#password').val();
var photo = $("#userfile").val();
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) {


<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" />

php controller:


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

class Registration extends CI_Controller
function __construct() {

public function index() {

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

function insertdata() {
$file = $_POST['user_photo'];
$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
if ( ! $this->upload->do_upload('userfile')) {
$error = array('error' => $this->upload->display_errors());
} else {
$data = array('upload_data' => $this->upload->data());

Answer Source

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

            url: "<?php echo SITE_ROOT;?>Registration/insertdata",
            data: data,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download