Reputation: 1
im trying to upload image in codeignitier using ajax
the problem is in ajax won't send any data to the controller
here is my code:
$("#file-input").change(function(e) {
$.ajax({
url: "<?php echo base_url(); ?>ControllerEditor/uploadImageUserAjax",
type: "POST",
data: new FormData(this),
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data)
{
if(data)
{
console.log(data);
}
// $("#targetLayer").html(data);
},
error: function()
{
}
});//end ajax
}); //end submit
<form id="form-uploadImage" action="ControllerEditor/uploadImageUserAjax" method="post" enctype="multipart/form-data">
<div class="image-upload">
<label for="file-input">
<img src="asset/globalimage/addIcon.png"/>
</label>
<input id="file-input" name='file-input' type="file"/><br>
Add Image
</div>
</form>
Upvotes: 0
Views: 48
Reputation:
you can try this!hope it's help to you
<form enctype="multipart/form-data" accept-charset="utf-8" name="formname" id="formname" method="post" action="">
<div class="image-upload">
<label for="file-input">
<img src="asset/globalimage/addIcon.png"/>
</label>
<input id="file-input" name='file-input' type="file"/><br>
Add Image
</div>
</form>
function uploadImage() {
if (typeof FormData !== 'undefined') {
// send the formData
var formData = new FormData( $("#formID")[0] );
$.ajax({
url : baseUrl + 'uploadImage', // 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!");
}
}
Upvotes: 0
Reputation: 96
Replace below code
data: new FormData(this),
with the
data : new FormData($('#form-uploadImage')[0]),
I hope this will help you.
thank you.
Upvotes: 1