Comunicar el Formulario de Subida de Ficheros con el Formulario de la Aplicación

Cuando estamos desarrollando una aplicación y queremos incorporar una subida multiple de fichero es que esta subida esté ligada a otros elementos de la aplicación. Ya hemos visto en entradasanteriores que la funcionalidad de Ajax para la subida de ficheros implica la incorporación en nuestra página de un formulario extra. Por lo tanto tendremos dos formularios, uno para la subida de ficheros yotro para el envío de los datos propios de la aplicación.

Es obvio que si estamos desarrollando por ejemplo una Tienda Online donde los productos pueden tener más de una imagen, además de poderrealizar una subida multiple de ficheros querremos que cuando demos de alta o actualicemos el producto saber que fotos se han añadido y quitado para poder actualizar la base de datos.

La cuestiónes ¿Cómo comunico ambos formularios?. A grandes rasgos vamos a crear un elemento en el formulario de la aplicación donde agregaremos la información necesaria para enviarla al servidor. De manera unpoco más concreta se va a crear un elemento Select multiple donde se incorporarán todas las opciones a través de JQuery cuando se vaya a enviar el formulario de la aplicación.

Así en primer lugarserá necesario disponer de un elemento select multiple que sea enviado en el modelo, recordar que estamos trabajando con MVC 3 o 4.

@Html.ListBoxFor(model => model.imagenes,newMultiSelectList(Model.imagenes), new {Multiple = "multiple"})
El segundo paso es, usando JQuery, preparar la herramienta de subida de ficheros para poder averiguar que ficheros hay subidos y así poder añadirlos alselect.

La subida de ficheros con Ajax utiliza plantillas JQuery para la incorporación de cada fichero en el documento HTML. La plantilla de los ficheros ya subidos es como la que se ve acontinuación:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


{% for (var i=0, file; file=o.files[i]; i++) { %}...