Cargar varios archivos usando CodeIgniter con JQuery 2

En el presente artículo continuaremos hablando del método para cargar múltiples ficheros usando CodeIgniter con JQuery.

En el articulo pasado, hablamos de como crear de manera dinámica múltiples componentes visuales en tiempo real usando JQuery.

Ahora pasaremos al trabajo con CodeIgniter. Lo primero que tienes que tener en cuenta es que el formulario que creaste en la vista tienes que declararlo multipart.

   1: form_open_multipart()

Esta función es absolutamente idéntica a form_open(), excepto que agrega un atributo multipart que es necesario si quisiera usar el formulario para subir archivos.

Una vez tenido esto claro. En nuestro controlador realizamos una función para cargar por un post la información de los componentes visuales que creamos anteriormente en nuestra vista.

Para esto empleamos la clase de subir ficheros de CodeIgniter. En el siguiente ejemplo especifico la carpeta hacia la que voy a subir el fichero, el tipo de fichero que quiero recibir (* para cualquier tipo), el tamaño máximo de fichero. El overwrite permite sobrescribir los ficheros en el servidor. He cargado la clase upload que trae CodeIgniter en una de sus bibliotecas, y al cargarla le he pasado mi configuración. Y por último la cantidad de ficheros que voy a cargar. Como en otros artículos referentes a este tema, no tratare lo de la validación de carga de ficheros ya que por ahora no es el objetivo aunque no deja de ser necesario e importante.

   1: function nomre_de_la_funcion()

   2: {

   3:     $config['upload_path']   = './uploads/';

   4:     $config['allowed_types'] = 'gif|jpg|png|doc|rar|zip|xls';

   5:     $config['overwrite']     = TRUE;

   6:       $config['max_size']     = '100';

   7:     $file_number = $this->input->post('file-number');

   8:         

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

  10:     

  11:  

  12:  

  13:      for($i = 0; $i< $file_number; $i++)

  14:             $this->upload->do_upload('file_name'.$i)}  

Si resultó positivo puedes acceder al nombre del fichero, que ya está en el servidor, a través del mismo $_FILES ['file_name]['name'], y guardar el nombre en la base de datos.

Otra vía para subir varios ficheros desde un mismo formulario, puedes ponerle a todos los input files el mismo nombre con corchete (ej. file_name[]), y accedes a ellos a través de:

   1:  

   2: $_FILES['filename']['name'][0];

   3: $_FILES['filename']['name'][1];

   4: …

   5:       

Como habrás podido ver, esta es una vía muy sencilla para la carga de múltiples ficheros, y a mí, en lo particular me funcionó. Espero que sea de ayuda para futuras soluciones a problemas de este tipo.

{ Leer Más }

Cargar varios archivos usando CodeIgniter con JQuery 1

En este artículo quiero mostrarles una solución bastante sencilla para generar varios componentes visuales para cargar múltiples archivos.

Partiendo de la necesidad que tuve de subir al servidor varios archivos, y teniendo en cuenta que con el siguiente código incorporas el componente visual que te permite escoger un fichero.

   1: <input type="file" name="file_name" id="file_id"/>

Una variante que tienes para subir múltiples archivos es la de predefinirlos con nombres diferentes pero entonces te limitarías a subir solo la cantidad de predefiniste.

La solución que utilicé para darle solución a mi problema fue de ir adicionando en tiempo real, tantos componentes visuales como necesitara. Para esto le adicioné al lado del componente visual un vínculo vacío con el texto “adicionar”, que es el que se va a cargar con la función de adicionar más elementos visuales. Y un componente input de tipo hidden que fuera almacenando la cantidad de componentes que fuese creando.

   1: <input type="hidden" id="file-number" name="file-number" value="1" />

Inicialmente tiene el valor 1 (value="1") porque por defecto ya tengo creado un componente visual.

Creo un div contenedor que es el que va a tener el elemento actual y los elementos que voy creando.

   1: <div id="file-list">

   2:   Aquí van todos los elementos visuales que se irán creando

   3: </div>

Luego dentro de ese div adiciono el primer componente que se visualizará por defecto y quedaría de esta forma

   1: <div id="file-list">

   2: <input type="file" name="file_name0" id="file_id0"/><a href="" id="add-file" name="add-file">adicionar</a>  

   3: </div>

Una vez introducido el código anterior voy a generar usando JQuery tantos componentes visuales como necesite.

   1: <script type="text/javascript">

   2: $(document).ready(function(){

   3:   $('.add-file').live('click',function(event){

   4:         event.preventDefault();               

   5:         var  pos = Number($("#file-number").val());

   6: var new_component = ' <div class="file"> <input type="file"  name="file_name'+pos+'" id=" file_id'+pos+'" /> &nbsp;<a href="" id="del-file" class="del-file">eliminar</a></div>';

   7: $('#file-list).append(new_component);                        $("#file-number").val(Number($("#file-number").val())+1);

   8:     });

   9: });

  10: </script>

La variable pos guarda el número actual del componente oculto (<input type="hidden"……) que me servirá para darle nombre diferente a los componentes que voy creando.

   1: var new_component = ' <div class="file"> <input type="file"  name="file_name'+pos+'" id=" file_id'+pos+'" /> &nbsp;<a href="" id="del-file" class="del-file">eliminar</a></div>';

Nótese que en la variable new_component voy creando un input de tipo file con el mismo nombre lo que lo diferencia es el final que es el valor del componente de tipo hidden que creé este también me servirá más adelante para saber la cantidad de componentes que tengo en mi página y para saber la cantidad de veces tengo que recorrer el ciclo para adicionar todos los archivos de que seleccioné y además un nuevo componente que es un vínculo vacío que tendrá como id del-file con el texto eliminar que será al que le cargaré la función de eliminar el componente al cual se encuentra asociado. Y todos estos elementos dentro de un div que contendrá el input y el href con el texto eliminar

Le adiciono al div con el id file-list el código html que almaceno en la variable new_component.

   1: $('#file-list).append(new_component);              

Y por último aumento el valor del componente oculto (<input type="hidden"……).

   1: $("#file-number").val(Number($("#file-number").val())+1);

Luego el eliminar quedaría de esta manera:

   1: $('.del-file').live('click', function(event){     

   2:         event.preventDefault();         

   3:  $("#file-number").val(parseInt($("file-number").val())-1);      

   4:  $(this).parent().remove();

   5:  });

Y al final quedaría un código javascript similar a este

   1: <script type="text/javascript">

   2: $(document).ready(function(){

   3:   $('.add-file').live('click',function(event){

   4:         event.preventDefault();               

   5:         var  pos = Number($("#file-number").val());

   6: var new_component = ' <div class="file"> <input type="file"  name="file_name'+pos+'" id=" file_id'+pos+'" /> &nbsp;<a href="" id="del-file" class="del-file">eliminar</a></div>';

   7: $('#file-list).append(new_component);                        $("#file-number").val(Number($("#file-number").val())+1);

   8:     });

   9: });

  10: $('.del-file').live('click', function(event){     

  11:         event.preventDefault();         

  12:  $("#file-number").val(parseInt($("file-number").val())-1);      

  13:  $(this).parent().remove();

  14:  });

  15:  

  16:  

  17: </script>

Hasta aquí este código me ha funcionado sin problemas.

En la segunda parte de este articulo te hablaré sobre la carga de múltiples archivos con CodeIgniter.

{ Leer Más }

Resaltar uno o varias filas según valor (jqGrid)

En este artículo quiero tratar el tema sobre cómo cambiar el color de una fila o varias de ellas en un jqGrid según el valor que tenga en algún campo en específico.

Supón que, en tu sitio tienes un jqGrid en el que muestras todos tus usuarios con los distintos campos que tienen en la base de datos nombre, apellidos, sexo, etc, y uno de estos es el estado del usuario Activo o Inactivo y quieres que los inactivos resalten sus filas de un color o con algún estilo en específico.

La solución que a continuación te muestro se hace completamente a nivel de vista en el modelo MVC (Modelo Vista Controlador), es decir se ejecuta en lenguaje del lado del de cliente, en este caso jquery.

Para hacer lo antes comentado se crea un arreglo.

var rowsToColor = [];

Después en la columna que se desea evaluar el valor se le añade la propiedad formatter seguido del nombre de la función que tendremos comprobando la condición necesaria para aplicar el estilo deseado a la fila.

{name:'ENABLE', index:'ENABLE', width:90, align:’left’, formatter: rowcolor},

Si tienes en el campo alguna función ya declarada en el formatter puedes incluir el código en tu función o declarar otra vez dicha columna y ponerle la propiedad hidden a true, para que no se muestre. En este caso el nombre de la función es rowcolor y debajo un ejemplo de cómo luciría.

function rowcolor(cellValue, options, rowObject) {         if (cellValue == 0)             rowsToColor[rowsToColor.length] = options.rowId;         return cellValue; }

En este caso evalúa el valor que viene en cellValue que no es más que el valor de la celda en cuestión y si es igual a 0, es decir, el usuario que está verificando esta desactivado guarda en la última posición del arreglo que declaramos el id de la fila para utilizarlo cuando el jqGrid esté completamente cargado, para ello se utiliza la propiedad loadComplete del componente.

loadComplete: function() {                                                for (var i = 0; i < rowsToColor.length; i++) {                                 $("#" + rowsToColor[i]).find("td").css("background-color", "#FF7F7F");                                 $("#" + rowsToColor[i]).find("td").css("color", "black");                              }                     }

En esta función se pueden hacer todas las demás cosas que se necesiten hacer cuando esté completamente cargado el jqGrid.

Este ciclo lo que hace es recorrer la variable que se declaró en un principio como arreglo y luego según la condición se fueron guardando los id de los <tr> entonces se selecciona el componente con ese id ya que jQuey cuando crea la tabla (jqGrid) le pone al tr la propiedad id que fuimos capturando con la condición ya una vez seleccionado con la función find acompañada de css se le aplica el estilo necesario.

Nota:

Es importante tener en cuenta que si en la misma vista se está utilizando más de un jqGrid es necesario especificar en el selector que tabla se desea personalizar con este css ej.

$("#nombre_tabla #" + rowsToColor[i]).find("td").css("background-color", "#FF7F7F");

Espero les haya servido de ayuda.

{ Leer Más }