entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

Como subir varias imágenes en CodeIgniter

Buenas Tardes, he editado esta pergunta pues he buscado en google tanto ne español como en ingles y no he encontrado algo realmente como lo que quiero hacer. Querio hacer algo sencillo, que cuando de clic en un link(a) se abra un modal de insertar que me permita seleccionar varias imagenes a la vez y que cuando le de lcic a guarda las suba todas a una direccion en especifico.
Si me pudieran guiar en como hacerlo pues no he encontrado la via adecuada que me haga esto.
Saludos Dairon.

carlossevi comentado Abr 22, 2015

¿Cual es la diferencia entre lo que buscas y este ejemplo de jQuery File Upload? Es para entender un poco mejor la problemática.

dairon comentado Abr 22, 2015

Carlossevi está muy buena esa librería, la voy a estudiar para ver como luego de subir las fotos cojer todas las direcciones de los ficheros subidos e insertarlos en la base de datos, pero realmente lo que quería era algo más sencillo, es decir un botón que diga album y al dar clic salga la ventana de dialogo seleccionar varias imagenes de una carpeta subirla con codeigniter y guardar los links en la base de datos.
Saludos Dairon
sobre todo mano insertar todas las fotos de un clic y no una a una

carlossevi comentado Abr 22, 2015

Sólo aclarar que con esa librería también puedes seleccionar varios archivos al mismo tiempo. Me parece que con un poco de trabajo se puede conseguir exactamente lo que quieres.

dairon comentado Abr 22, 2015

quiero aprender mano y hacerlo poco a poco, no con una libreria que lo haga todo

carlossevi comentado Abr 22, 2015

Me parece loable que lo quieras hacer por tu cuenta. De todas formas, tienes el código fuente disponible en Github por si quieres aprender de las técnicas que utiliza.

dairon comentado Abr 22, 2015

eso si lo pensé, pero me gustaría hacerlo con javascript puro sin uzar otro framework como jquery ni nada de eso, solo js con sus prototype y todo su core para aprender de verdad js, y dando varias opciones a la hora de subir los ficheros, así como subirlos todos de un golpe como hace facebook cuando se sube un album fotográfico

1 Respuesta

2votos

white Puntos75680

Hola @dairon, aca te dejo una clase simple que hize, no usa ningun framework pero necesita de ecmascript 5 y no funciona en IE menor a 10.

https://gist.github.com/ksprwhite/a720bcf74dbd55ec3ab8#file-fileuploader-class

para utilizar esta clase, la sintaxis es:

var uploader = new FileUploader(String selector, Object opciones)

selector: un selector html como puede ser input.fotos o #fotos
opciones: opciones para la funcion:

  • wrapperStyle: clase para el div que contiene el boton de seleccionar archivos | default: null
  • url: url a donde enviar la peticion ajax, en caso de que selector este dentro de un <form> se toma el atributo action si esta definido. | default: empty string
  • chooseText: el texto del boton que selecciona archivos | default: "Seleccionar archivos"

Uploader() regresa un objeto que contiene las propiedades upload(), on(), element y reset()

  • upload: cuando se llama se procede a subir los ficheros.
    NOTA: en caso de que selector este en un <form> cuando este haga submit se subiran los archivos.
  • on (String callback, function handler ) controla un evento,
    eventos disponibles: success, error, complete, progress y choose.
  • reset() resetea el campo file y los demas campos

ejemplo:

var uploader = new FileUploader('#fotos', {})
.on('progress', function (progress)
{
    console.log('progreso: ', progress');
})
.on('error', function ()
{
    console.log('error al subir archivos.');
})
.on('success', function ()
{
    alert('archivos subidos exitosamente');
});

<form method="POST" action="upload.php">
    <input type="file" name="fotos[]" id="fotos">
    <input type="submit" value="guardar">
</form>

Compatibilidad

Necesita caracteristicas de ecmascript 5 y html 5

  • formData
  • xhr 2
  • Array.forEach
  • Array.indexOf
  • Object.keys
  • atributo multiple para input type file (html 5)

espero te sea de ayuda para seguir aprendiendo javascript.

saludos!

dairon comentado Abr 23, 2015

Muchas gracias @white ahora mismo comenzaré a probarlo

Por favor, accede o regístrate para responder a esta pregunta.

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Otras Preguntas y Respuestas


Actividad Reciente

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta