codeigniter uploading image through ajax

Question

I am trying to upload image to a location through ajax using codeigniter and how to receive in the controller.

I have search too much but don't know where is the problem!

Ajax code:

 $('#btnform2').click(function(e){
        e.preventDefault();
 // valadation_form();
 $("form#data").submit(function(event){

//disable the default form submission
 event.preventDefault();

  //grab all form data  
var formData = new FormData($(this)[0]);

 $.ajax({
  url: '<?php echo base_url(); ?>"+"index.php/club/post_ajax',
  type: 'POST',
   data: formData,
  async: false,
  cache: false,
  contentType: false,
  processData: false,
  success: function (returndata) {
  alert(returndata);
 }
 });

 return false;
 alert("test");
});
 });

My form

<form method="post" class="form-horizontal" id="form_members" role="form" name="uploader">
<label for="fullname" class="col-sm-2">Full Name</label>
<input type="text" class="form-control" name="fullname" id="firstname" placeholder="Full Name" >
<label for="lastname" class="col-sm-2">Computer Number</label>
<input type="text" class="form-control" name="computernumber" id="lastname" placeholder="Computer Number">
<label for="address" class="col-sm-2">E- mail Address</label>
<input type="email" class="form-control" name="email" id="address" placeholder="Email Address">
<label for="city" class="col-sm-2">Mobile Number</label>
<input type="text" class="form-control" list="cities" name="mobilenumber" id="mobilenumber" placeholder="Mobile Number">
<label for="phone" class="col-sm-2">Nationality</label>
 <input type="tel" class="form-control" name="Nationality" id="nationality" placeholder="nationality">
<label for="email" class="col-sm-2">Upload Photo</label>
<input id="file" class="file" type="file" multiple data-min-file-count="1">
<button name="submit" class="btn btn-warning" id="btnform2">Update Player Profile</button>
</form>

YOU know what your problem is you don't know how to debug , first thing first what does the console say? — madalinivascu
– madalinivascu, Commented Mar 11, 2016 at 8:19
its shows no errors if i use alert its alert the message but ajax is not calling — sheraz iqbal
– sheraz iqbal, Commented Mar 11, 2016 at 8:30

madalinivascu · Accepted Answer · 2016-03-11 08:33:41Z

2

Try this without the submit event:

 $("form#form_members button").click(function(event){

//disable the default form submission
 event.preventDefault();

  //grab all form data  
var formData = new FormData($(this).parent('form')[0]);

 $.ajax({
  url: '<?php echo base_url(); ?>/index.php/club/post_ajax',
  type: 'POST',
   data: formData,
  success: function (returndata) {
  alert(returndata);
 }
 });

});

edited Mar 11, 2016 at 8:33

answered Mar 11, 2016 at 8:24

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tech Savant Over a year ago

his form won't be submitted without the click event, it's just a button, not an input.

madalinivascu Over a year ago

the button is named submit but doesn't have a type submit ,didn't see that

Tech Savant Over a year ago

yeah i missed it too at first :)

Tech Savant Over a year ago

kudos for FormData($(this).parent('form')[0]

sheraz iqbal Over a year ago

Uncaught TypeError: Illegal invocation showing that error

|

Tech Savant · Accepted Answer · 2016-03-11 08:30:46Z

0

This line is not correct syntax..

url: '<?php echo base_url(); ?>"+"index.php/club/post_ajax',

change to

url: '<?php echo base_url(); ?>'+'index.php/club/post_ajax',

you should also try this instead of false..

contentType: 'multipart/form-data',

and see if that works, if not, let me know and I'll see what else I can figure out.

edited Mar 11, 2016 at 8:30

answered Mar 11, 2016 at 8:24

Tech Savant

3,7671 gold badge21 silver badges40 bronze badges

2 Comments

Tech Savant Over a year ago

if you have incorrect syntax your script won't run. just try it at least.

Tech Savant Over a year ago

what is your script returning? json object?

Collectives™ on Stack Overflow

codeigniter uploading image through ajax

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related