javascript - AJAX Codeigniter - You did not select a file to upload(error)- How to pass the file through AJAX

Question

I am trying to upload images via an AJAX call and Codeigniter:

My View:

            <?php echo form_open_multipart('upload/do_upload'); ?>
            <input type="file" name="userfile" id="userfile" size="20" />
            <br />
            <input type="submit" value="upload" id="upload_file_1" />
            </form>

My Ajax Call:

$(document).ready(function(){
    $(function() {
        $('#upload_file_1').click(function(e) {
            e.preventDefault();
            var filename = $("#userfile").val();
            $.ajax({
                url         :'index.php/upload/do_upload', 
                secureuri      :false,                   
                 fileElementId: 'userfile',
                dataType    : 'json',
                type : 'POST',
                done  : function (data)
                {

                    alert(data);
                }
            });               
        });
    });
});

and my controller:

class Upload extends CI_Controller {

    function __construct() {
        parent::__construct();
        $this->load->helper(array('form', 'url'));
    }

    function index() {
        $this->load->view('upload_form', array('error' => ' '));
    }

    function do_upload() {
        $config['upload_path'] = './uploads/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '1000000';
        $config['max_width'] = '10240';
        $config['max_height'] = '7680';

        $this->load->library('upload', $config);
        if (!$this->upload->do_upload('userfile')) {                        
            $error = array('error' => $this->upload->display_errors());    
            echo "error!";
            echo "<pre>";
            print_r($error);
            echo "<pre/>";
        } else {
            echo "done!";
        }
    }

}

but it gives me an error saying : "You did not select a file to upload. "; without AJAX it works fine, probably my AJAX call is not right! Could you please let me know if I am doing something wrong?

Thanks

Answer 1

In my very recent project i used below code to upload files with formdata asynchronously using jquery ajax, However i was not able to upload files with success: function() of jQuery so i used complete to process server response. You can try with success:function().

You will receive your data in $_Post & file in $_FILES variable.

If only want to upload files. change it like wise.

Hope this will help you.

Also look at this tutorial:http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajax

function frm_submit(){     
    var form = new FormData(document.getElementById('frmSample')); //frmSample is form id
            var file = document.getElementById('userfile').files[0]; //userfile file tag id
            if (file) {
                form.append('userfile', file);
            }
        $.ajax({
                url: 'path/to/upload/script',
                type: 'POST',
                xhr: function() {  // custom xhr
               //progressHandlingFunction to hangle file progress
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) { // check if upload property exists
                        myXhr.upload.addEventListener('progress', progressHandlingFunction, false); // for handling the progress of the upload
                    }
                    return myXhr;
                },
                data: form,
                cache: false,
                contentType: false,  //must
                processData: false,  //must
                complete: function(XMLHttpRequest) {
                    var data = JSON.parse(XMLHttpRequest.responseText);
                    console.log(data);
                      console.log('complete');
                },
                error: function() {
                  console.log('error');
                }
           }).done(function() { 
                  console.log('Done Sending messages');    
            }).fail(function() {
            console.log('message sending failed');
            });
}//function frm_submit ends here