Ajax file upload with Codeigniter and jQuery Form Plugin

Question

I'm tying to use jQuery Form Plugin with Codeigniter. When I try to upload, the page is redirected (so the ajax is not working) and nothing is uploaded.

The view from where the form is located look like this:

<form id="upload_form" action="upload/do_upload" method="post" enctype="multipart/form-data">
   <input type="file" name="myfile"><br>
   <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
</div>
<div id="status"></div>

<script>
(function() {

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('#upload_form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
  complete: function(xhr) {
    status.html(xhr.responseText);
  }
}); 

})();   
</script>    
<script type="text/javascript" src="http://localhost/editor/assets/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://localhost/editor/assets/js/jquery.form.js"></script>
</body>

And the controller for the upload is just taken from the Codeigniter manual:

<?php

class Upload extends CI_Controller {

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

    function do_upload()
    {
        $config['upload_path'] = './userdata/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '100';
        $config['max_width']  = '1024';
        $config['max_height']  = '768';

        $this->load->library('upload', $config);

        if ( ! $this->upload->do_upload())
        {
            $error = array('error' => $this->upload->display_errors());

            //$this->load->view('upload_form', $error);   TODO echo error 
        }
        else
        {
            $data = array('upload_data' => $this->upload->data());

            //$this->load->view('upload_success', $data);  TODO echo succes
        }
    }
}
?>

I'm sure I've just made a little mistake somewhere, could any one see where I went wrong? Thanks in advance!

brightintro · Accepted Answer · 2013-03-17 04:47:25Z

2

It looks like you forgot to initialize the form when the DOM is ready.

$(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#upload_form').ajaxForm(function() { 
            //rest of your code from the post
        }); 
    });

answered Mar 17, 2013 at 4:47

brightintro

1,0161 gold badge11 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Ajax file upload with Codeigniter and jQuery Form Plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related