Codeigniter Ajax Subir imagen

Actualmente estoy desarrollando algunos formularios para mi proyecto escolar con CodeIgniter.

La idea es que tengo un formulario con carga de imágenes. Estoy tratando de hacerlo dinámicamente con Ajax pero parece que no funciona en absoluto. Probé la versión no dinámica con php y funciona perfectamente, mis imágenes están en mi carpeta y no tengo ningún problema con eso.

Intenté como 5 o 6 complementos sin resultados, ciertamente es mi culpa, pero no sé dónde cometí un error.

<---Controlador--->

if($result = $this->images_model->add_bdd())
{   
    $data['uploaded'] = $result;
    $data['message_upload'] = 'Image uploader avec succès.';                            
    $this->template->set_title('Upload successful');
    $this->template->view('add_places',$data);
}
else
{   
    $this->template->set_title('Upload failed');
    $this->template->view('add_places');
}

<--Modelo-->

function add_bdd()
{
    $config = array(
                'allowed_types' => 'jpg|jpeg|tiff',
                'upload_path' => $this->gallery_path,
                'max_size' => 2000,
                'remove_spaces' => TRUE,
                'overwrite' => FALSE
            );

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

        $data_img = $this->upload->data();
        $exif = $this->exif_extractor->coords($data_img['full_path']);
        $data = array(
                'titre' => 'titlecontent',
                'url' => base_url('images/'.$data_img['file_name']),
                'url_min' => base_url('images/'.$data_img['raw_name'].'_min'.$data_img['file_ext']),
                'alt' => 'cover_contentName',
                'id_users' => $this->session->userdata('id'),
                'date_upload' => date('Y-m-d H:m'),
                'date_modified' => date('Y-m-d H:m'),
                'lat' => $exif[0],
                'long' => $exif[1],
                );
        $this->db->insert('pictures',$data);
        return $exif;
    }
    else
    {
        return false;
    }
}

<--Ver-->

<form action="http://localhost:8888/project/images/add" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" name="userfile" value="Image de couverture"  />
<button name="upload" type="button" id="upload">Upload</button>
<input type="submit" name="submit" value="Publish Place"  />
</form>

¿Alguien puede darme un complemento de jQuery para cargar imágenes dinámicamente y enviar al script mis imágenes con la ruta y otros datos que quiero devolver?

No puedo pegar como todo el código que hice para jQuery, pero realmente necesito ayuda al respecto. ¡Hace 2 días que estoy en eso!

Gracias por tu ayuda.

preguntado el 22 de mayo de 12 a las 21:05

3 Respuestas

¿La función add_bdd() devuelve falso?

Utilicé CodeIgnitor para hacer esto mismo y descubrí que los filtros que especifica generalmente son la razón por la que no carga el archivo. Debe agregar más código a la sección donde if ($this->upload->do_upload()) es falso e imprima el código de depuración usando lo siguiente:

echo $this->upload->display_errors();

Vea aqui para mas informacion: http://codeigniter.com/user_guide/libraries/file_uploading.html

Tenga en cuenta que si está llamando a esto a través de AJAX, necesitará un medio para ver el resultado de la depuración, como imprimir el resultado de la depuración con eco en un elemento HTML en su página de llamadas. También puede imprimir la información usando una herramienta como Firebug.

contestado el 22 de mayo de 12 a las 21:05

No tengo errores cuando lo subí de la manera normal. Solo necesito un complemento que funcione con mi código, no sé cómo puedo lograrlo. Esto es realmente especial. Si puede darme un ejemplo de una de sus cargas de archivos ajax, podría ser útil. Gracias de antemano por tu ayuda. - Simon

Sin el código Javascript, es poco lo que nadie puede hacer por usted.

Comprar este tutorial en Nettuts+ que profundiza en la idea básica que está buscando para que pueda comprender, depurar y ajustar mejor su código.

Además, apenas uso los complementos de jQuery, ya que me resulta más fácil codificar uno que se adapte mejor a las necesidades de mi proyecto actual, por lo que no puedo recomendar ninguno.

contestado el 23 de mayo de 12 a las 14:05

Gracias @Spyros por tu respuesta. Probé tu tutorial el lunes y no funcionó porque jQuery es la versión 1.7 y el script funciona hasta la 1.2, por lo que tienes un error. Encontré una manera de resolver mi problema. Lo publicaré mañana con el código completo y lo explicaré. (mucho más fácil y actualizado) - Simon

Gracias por su ayuda, cambié mi dinámica sobre el script para que ahora funcione perfectamente con lo que tengo que hacer.

Existe el script para mi sistema de carga:

<-- VER (subir_img)-->

<div id="container">
<div id="filelist"></div>
<a href="http://localhost:8888/myproject/#" id="userfile" name="userfile">[Select files]      </a>    
<a href="http://localhost:8888/myproject/images/index#" id="uploadfiles">[Upload files]</a
</div>

<-- CONTROLADOR -->

function index(){
    if($this->_access())
    {
        $this->template->add_include('js/jquery.js')
                       ->add_include('js/browserplus.js')
                       ->add_include('js/plugins/plupload/plupload.full.js')
                       ->add_include('js/imgfunc.js');
        $this->template->view('upload_img');
    }
    else
    {
        redirect(site_url());
    }
}

function upload_image_spot()
{
    if($query = $this->images_model->upload_image_spot())
    {
        echo json_encode($query);
    }
    else
    {
        echo $this->upload->display_errors('', '');
    }
}

<-- MODELO -->

   function upload_image_spot()
{
    $config['upload_path'] = realpath(APPPATH. '../images/spots');
    $config['allowed_types'] = 'jpg|jpeg|tiff|png';
    $config['max_size'] = 3062;
    $config['encrypt_name'] = TRUE;
    $this->load->library('upload', $config);
    if($this->upload->do_upload('file')) 
    // file means the file send to the website for upload, this is the name of field for Plupload script
    {
    $data_img = $this->upload->data();
    $copies = array(
            array('dir' => 'images/spots/large/', 'x' => 1000, 'y' => 600),
            array('dir' => 'images/spots/thumb/', 'x' => 100, 'y' => 60)
    );

    $this->copies($data_img,$copies);

    return 'whatever'; // Not real data, I don't wanna post them here
    }
}

<-- SCRIPTS JS -->

En primer lugar incluir:

-jQuery

-navegadorPlus

-Subir

(Cargar secuencia de comandos)

Ahora agregue este script en un archivo vacío:

var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'userfile',
    container : 'container',
    max_file_size : '3mb',
    url : 'yourUploadFunctionCI',
    flash_swf_url : 'plugins/plupload/js/plupload.flash.swf',
    silverlight_xap_url : 'plugins/plupload/js/plupload.silverlight.xap',
    filters : [
        {title : "Image files", extensions : "jpg,jpeg,JPG,JPEG,tiff,png"},
    ]
});

uploader.bind('Init', function(up, params) {
});

$('#uploadfiles').click(function(e) {
    uploader.start();
    e.preventDefault();
});

uploader.init();

uploader.bind('FilesAdded', function(up, files) {
    $.each(files, function(i, file) {
        $('#filelist').html("");
        $('#filelist').append(
            '<div id="' + file.id + '">' +
            file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
        '</div>');
    });

    up.refresh();
});

uploader.bind('UploadProgress', function(up, file) {
    $('#' + file.id + " b").html(file.percent + "%");
});

uploader.bind('Error', function(up, err, msg,file) {
    $('#filelist').append("<div>Error: " + err.code +
        ", Message: " + err.message +
        (err.file ? ", File: " + err.file.name : "") +
        "</div>"
    );
    console.log(msg,up,err);
    up.refresh();
});

uploader.bind('FileUploaded', function(up, file,response) {
    $('#' + file.id + " b").html("100%");
    var data = jQuery.parseJSON(msg.response);
    console.log(data);
});

Haga su propia personalización y eso es todo, no necesita secuencias de comandos adicionales como puede ver en el sitio web, como copiar/pegar todas las secuencias de comandos de un archivo php a un controlador, simplemente agregue 'archivo' dentro de do_upload y ¡todo funcionará bien!

Que tengan un buen día chicos, espero que sea de ayuda.

Simon

contestado el 27 de mayo de 12 a las 22:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.