Question

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.

Comments

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

---

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

---

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.

---

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

---

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.

---

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

Answer 1

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!