No deja de ser curioso que el control de AJAX para .Net «AjaxFileUpload» no funcione en parte como debe ya desde su pagina de demostración (AQUI). Empeñado por tanto en hacerlo funcionar invoque al Capitan Haddock y sus improperios y conseguí arreglarlo a fuerza de jQuery, un agradable paseo…

Las características que buscaba eran:
– Subida múltiple de archivos
– Limitación del número de archivos a subir
– Barra de progreso durante la subida de cada archivo

Estas características las ofrecía este control, pero por ejemplo la limitación del número de archivos no era efectiva, ya que al usar draganddrop no controla que arrastres el número de archivos definidos en el atributo MaximumNumberOfFiles y puedes subir todos los que quieras…Empezamos

Solucionar la limitación de número de archivos a subir

En mi caso desactive la característica DragAndDrop (arrastrar y soltar archivos), ya que para el uso de este control sólo iba a usar hasta 3 imagenes.

Para desactivar esto directamente desde CSS:

<style type="text/css">
#flImage_Html5DropZone
{
display:none;
}
</style>

En segundo lugar, este control viene por defecto como input type=»multiple» por lo que, cuando te muestra el formulario de selección de archivos, te permite seleccionar varios de una vez….pues..

Para desactivar la selección múltiple de ficheros

utilicé jQuery de esta forma.
<script type="text/javascript">
var numfiles;
$(document).ready(function (e) {
try {
//AjaxFileUpload
var inputImg = document.getElementById("flImage_Html5InputFile");
inputImg.multiple = false;

}</script>

Con esto evitamos la selección múltiple y que podamos subir todos los archivos que queramos…Ahora viene controlar que se suban hasta 3 imagnes sólamente y que tras subir la última se desactive el botón de seleccionar archivo (mas que limitar automaticamente, lo que hacemos es bloquear que se puedan subir más, que no es lo mismo).

Pues bien, este control dispone de un evento de Cliente que se ejecuta cada vez que hemos seleccionado un archivo y le hemos dado a Upload (hay que darle para poder seleccionar otro), este evento es OnClientUploadComplete y lo que vamos a hacer es básicamente controlarlo para ir contando cuantos archivos llevamos subidos, de esta forma.


var numfiles;
function clientUpload(sender, args) {
try {
//detectamos con jquery cuántas veces aparece el selector ".filename"
numfiles = $('.filename').length;
//si llega a 3, entonces desactivamos los elementos que permite subir mas archivos.(varias veces por si alguno se revela)
if (numfiles == 3) {
$("#flImage_SelectFileButton").css("visibility", "hidden");
$("#flImage_SelectFileButton").hide();
$("#flImage_Html5InputFile").hide();
$("#flImage_InputFileElement").hide();
$("#flImage_Html5InputFile").prop('disabled', true);
$get("flImage_SelectFileContainer").style.display = 'none';
}

}
catch(e)
{
}
}

Posteriormente, desde la cara del servidor, con el evento OnUploadComplete podremos obtener el contenido del control (los array de byte de cada archivo) algo asi:

protected void AjaxFileUpload1_UploadComplete(object sender, AjaxFileUploadEventArgs file)
{
Session["fileContentType_" + file.FileId] = file.ContentType;
Session["fileContents_" + file.FileId] = file.GetContents();
Session["fileName_" + file.FileId] = file.FileName.Split('\').Last();
List<String> filesId = new List<String>();
if (Session["filesID"] != null)
{
filesId = (List<String>)Session["filesID"];
}
filesId.Add(file.FileId);
Session["filesID"] = (List<String>)filesId;
}

Espero haya sido de utilidad, pues no hay mucho control gratuito que ofrezca estas posibilidades y funcione «bien».