How to remove submit button and save image as well as show image using ajax in codeigniter?

Hi guys i want to remove the submit button and upload my image with only upload button .also i am using ajax to send the image to the database as well as in th eupload folder. when i remove the submit button and use $(this).submit() in my form it shows nothing and no ajax runs. What am i doing wrong? here is my code

        {
            if(!$timeline_image=="")
            {
                $image_properties = array('src' => base_url("uploads/".$timeline_image),'width' => '900px','height'=> '400px','id'=>'coverimg', 'title' => 'That was quite a night','rel'   => 'lightbox');
                echo img($image_properties);
            }else{
                $timiline_image = array(
                    'src'   => base_url("assets/img/Facebook-cover.jpg"),
                    'width' => '900px',
                    'height'=> '400px',

                );

                echo img($timiline_image);
            }
            ?>
            <div id="timelineselector" class="col-md-3 grow">
                <?php echo form_open_multipart('',["id"=>"form_cover"]); ?>
                <input type="hidden" name="id" value="<?php echo $id ;?>">
                <?php echo form_upload(["name"=>"timelineimage","id"=>"timelineimage" ]); ?>
                <?php echo form_close(); ?>
            </div>
            <?php
        }
        ?>
    </div>
</div>

and now for ajax

    jQuery('#form_cover').submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this);
  var url = '<?php echo base_url("user/coverimage"); ?>';
  formData.value
  jQuery.ajax({
    type: "POST",
    url: url,
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
      console.log(data);
      $('#coverimg').attr('src', data);
    },
    error: function(data) {
      //error function
    }
  });
});

Answers 1

  • jQuery .submit() is an event binder which binds the function you pass to it with a submit event of the desired element.

    In order to perform your action as desired, you must replace the submit listener with an on change listener targeted at the upload field. Since after the removal of the submit button, the submit action doesn't occur.

    $('#timelineimage').change(function(e){
         // Logic
    });
    

Related Articles