How can i upload image with ajax in codeigniter?

Question

I'm trying to upload image with jQuery and ajax function, and how can I fetch all details of image file, like in php we use `$_FILE()` Here is my code JS ``` $("#uploadimg" ).click(function() { $( "#file" ).click(); }); $( "#file" ).change(function(e) { var file=$('#file').val(); alert(file); die(); e.preventDefault(); $.ajax({ url:'http://localhost/JSG/blog/uploadimg', secureuri:false, type: "POST", fileElementId:'image', dataType: 'text', data:{ file: file }, cache: true, success: function (data){ alert(data); console.log(data); }, }); }); ``` Controller ``` public function uploadimg() { $var = $_POST['file']; print_r($var); if($this->input->post('file')) { $config['upload_path'] = 'upload'; $config['file_name'] = $var; $config['overwrite'] = 'TRUE'; $config["allowed_types"] = 'jpg|jpeg|png|gif'; $config["max_size"] = '1024'; $config["max_width"] = '400'; $config["max_height"] = '400'; $this->load->library('upload', $config); if(!$this->upload->do_upload()) { $this->data['error'] =…

Accepted Answer

You can to use FormData api in html5.

Your form must be:

```
<form enctype="multipart/form-data" accept-charset="utf-8" name="formname" id="formname"  method="post" action="">
```

Then jquery:

```
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!");
    }   
}
```

Then in the controller you will get the files in `$_FILES` array.

How can i upload image with ajax in codeigniter?

Solution

Problem