Upload Image using ajax and codeigniter

Question

Upload Image using ajax and codeigniter

Navigation

#1 by (0 votes)

0

What I am trying to do is to make a record of a table with different fields, one of them of image. with my code the record is done in the BD except for the image. This is my code:

this is the modal where the fields of the table are:

<!-- Modal  a;adir departamento-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Añadir Departamento</h4>
        </div>
        <div class="modal-body">
            <form id="frmDepto" class="form-horizontal" role="form">

                <div class="form-group">
                    <label for="depto" class="col-lg-2 control-label">Departamento:</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="depto" id="depto" placeholder="Numero departamento">
                    </div>
                </div>
                <div class="form-group">
                    <label for="nombre" class="col-lg-2 control-label">Nombre:</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="nombre" id="nombre" placeholder="Nombre departamento">
                    </div>
                </div>

                <div class="form-group">
                    <label for="foto" class="col-lg-2 control-label">Imagen:</label>
                    <div class="col-lg-10">
                        <input type="file" class="form-control" name="foto" id="foto" placeholder="Imagen del producto" >
                    </div>
                </div>

                <div class="form-group">
                    <label for="codigo" class="col-lg-2 control-label">Código:</label>
                    <div class="col-lg-10">
                        <input type="text" class="form-control" name="codigo" id="codigo" placeholder="Codigo departamento" >
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            <button id="btnGuardarDepto" type="button" class="btn btn-primary">Guardar</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This is the function that triggers the modal:

function insertarDepartamento () {
    var data = $("#frmDepto").serialize(), myModal = $("#myModal"), content = $("#content_main");

    $.ajax({
        url: "<?=site_url('departamentos/insertarDepartamento')?>", 
        type: "post",                                               
        data: data,                                            
        beforeSend: function () {
            myModal.modal("hide");
        },
        success: function (respuesta) {
            location.reload(true);
            //content.empty().append(respuesta);
        }
    });

    return false;
}

this is my controller:

public function insertarDepartamento()

{ 
if($this->modelo->insertarDepartamento())
        echo 'true';
    else
        echo 'false';
}

and this is my model:

public function insertarDepartamento()
    {
         $data = array(
                      'depto'  => trim($this->input->post('depto')),
                      'nombre' => trim(strtolower($this->input->post('nombre'))),
                      'codigo' => $this->input->post('codigo'), 
                      'foto'   => $this->input->post('foto'),
                      // 'status' => $this->input->post('status')
                      );
    if($this->db->insert('lineas', $data))
        return true;
    else 
        return false;


}

imagen ajax codeigniter upload

asked by Irvin Olaff 23.06.2017 в 15:37

source

1 answer

Procedures stored in Controller Entity framework Error trying to install elibyy / tcpdf-laravel by composer

score 0 · Accepted Answer

Files are binary data, you can not send it by text (like serialize ) or by JSON (unless you convert it to base64). If your idea is to upload the file as binary, then you should send it in FormData .

const data = new FormData($('#formDpto')[0]);
...
$.ajax({
    url: "<?=site_url('departamentos/insertarDepartamento')?>", 
    type: "post",                                               
    data: data,                                            
    beforeSend: function () {
        myModal.modal("hide");
    },
    success: function (respuesta) {
        location.reload(true);
    }
});

In your controller you will get the files by constant $_FILES :

$_FILES["foto"]

From here you can do several things; Write the image in a directory, convert it to blob:

$foto = file_get_contents($_FILES['foto']['tmp_name']);