¿El control FileUpload dentro de un UpdatePanel sin actualizar toda la página?

Según Microsoft, el control FileUpload no es compatible con un AJAX UpdatePanel.

Soy consciente de que se puede agregar un PostBackTrigger al botón de enviar del siguiente modo:

   

El problema es que esto obliga a la forma de realizar una devolución completa que anula el objective de usar UpdatePanel en primer lugar. ¿Hay alguna solución a este problema que no cause que la página completa se actualice?

Sé de un componente de un tercero que puede hacer eso. Se llama ” swfupload ” y es de uso libre y de código abierto, y usa javascript y flash para hacer la magia.

aquí hay una lista de las características que ofrecen: (desde su sitio)

  • Cargar varios archivos a la vez mediante ctrl / shift-selection en el cuadro de diálogo
  • Devolución de llamada de Javascript en todos los eventos
  • Obtenga información de archivo antes de que comience la carga
  • Elementos de carga de estilo con XHTML y CSS
  • Mostrar información mientras los archivos se cargan usando HTML
  • No se necesita recargar la página
  • Funciona en todas las plataformas / navegadores compatibles con Flash.
  • Se degrada graciosamente al formulario normal de carga de HTML si Flash o JavaScript no están disponibles
  • Controlar el tamaño del archivo antes de iniciar la carga
  • Mostrar solo los tipos de archivos elegidos en el diálogo
  • Cargar en cola, eliminar / agregar archivos antes de comenzar a cargar

También tienen un área de demostración donde puedes jugar con su control. De esta forma, puede asegurarse de que sea exactamente lo que quiere.

Lo usamos en uno de nuestros proyectos y nunca nos ha fallado, así que creo que es una apuesta segura.

Ah, y aquí está la página de descarga: http://code.google.com/p/swfupload/

No puede cargar archivos a través de AJAX solo recargando un documento HTML completo. Usted debe usar iframe s si prefiere HTML puro (esto es más común, por ejemplo, usado por WordPress) u otra cosa como swfupload sugerida por Sven.

Agregue esto a su control de botón:

 OnClientClick="javascript:document.forms[0].encoding = 'multipart/form-data';" 

-o-

Haga que su etiqueta de formulario de página se vea como:

 

Lo encontré el otro día cuando me encontré con el mismo problema: http://vinayakshrestha.wordpress.com/2007/03/13/uploading-files-using-aspnet-ajax-extensions/ .

Para mi implementación, puse el iframe en una ventana emergente modal y agregué un botón con style = “display: none” para manejar el cierre de la ventana emergente. En la función javascript que observa el cambio en el iframe, agregué document.getElementById (“<% = btnCloseUpload.ClientID%>“), haga clic en (); para el botón oculto.

Pruebe AJAX AsyncFileUpload. Funciona bien si se usa en la materia para la que está destinado (el evento UploadedComplete).

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx

Puede usar IFrame con el atributo “objective” que menciona a la página FileUpload O use el ejemplo de Jquery en el enlace Cómo hacer una carga de archivo asíncrona (AJAX) utilizando iframe?

El botón que está desencadenando el evento de carga debe tener la propiedad UseSubmitBehavior establecida en falso:

 clsUploadButton.UseSubmitBehavior = False;