viernes, 9 de marzo de 2007

- File Upload con AJAX

Vamos a ver en esta entrada el código necesario para realizar upload de un archivo y que la experiencia de usuario sea cómoda a través del uso de AJAX. El concepto es muy simple; utilizamos dos divs, uno para mostrar el componente FileUpload de ASP.NET y otro para mostrar un mensaje o una imagen animada al usuario mientras la tarea de subir el archivo se ejecuta en segundo plano y no se muestra al usuario ninguna acción de Postback o roundtrip al servidor. A través de AJAX utilizamos una serie de funciones JavaScript para mostrar/ocultar los divs.

He aquí el codigo necesario:
- FileUpload.aspx (Nuestra página aspx)

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>File Upload Test</title>
<script language="javascript" type="text/javascript">

function divFileHide() {
var divFile = document.getElementById('fileUploadDiv');
divFile.style.display = 'none';

var divLoading = document.getElementById('loadingFileDiv');
divLoading.style.display = 'block';
}

function divFileShow() {
var divFile = document.getElementById('fileUploadDiv');
iframe.style.display = 'block';

var divLoading = document.getElementById('loadingFileDiv');
divLoading.style.display = 'none';
}

function upload(){
divFileHide();
}

function onComplete( result ) {
divFileShow();
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="fileUploadDiv">
<asp:FileUpload ID="FileUpload1" runat="server" Visible="true" />
<asp:Button ID="btnUpload" runat="server" Text="Subir Archivo"
OnClick="btnUpload_Click"
Visible="true" />
<asp:Label ID="lblError" runat="server" Visible="false"
Font-Bold="true" ForeColor="red" />
</div>
<div id="loadingFileDiv" style="display: none;">
El archivo está subiendo...
</div>
</form>
</body>
- FileUpload.aspx.cs (Nuestro archivo de code behind)
using System;
using System.Web.UI;

public partial class FileUpload : Page {
protected void Page_Load(object sender, EventArgs e) {
btnUpload.Attributes.Add("onclick", "return upload();");
}
protected void btnUpload_Click(object sender, EventArgs e) {
if (FileUpload1.HasFile) {
try {
String uploadFolder = "D:\\Uploads\\";
String file = FileUpload1.FileName;

FileUpload1.SaveAs(uploadFolder + file);
} catch (Exception ex) {
Trace.Write(ex.Message);
}
} else {
lblError.Text = "
El archivo no ha sido especificado";
lblError.Visible = true;
}
}
}

5 comentarios:

Anónimo dijo...

cuales el tamaño maximo para subir un archivo, como puedo acceder a la pagina desde otra makina: tengo xp y uso visual studio 2005, y la barra de direccion me marca http://localhost:1034/WebSite1/Default4.aspx

si puedes contestame a balta_r_i1710@hotmail.com
te lo agradecere bye

Anónimo dijo...

Esto funciona para VS2003? Ajax es propio de 2005? o 2003?
Gracias.

Pablo Barrientos dijo...

Lo he probado con VS2005, pero deberia funcionar con 2003 también, ya que no utiliza nada nuevo del framework 2.0

Anónimo dijo...

La Verdad ese codigo solo sirve una sola vez y despues ola pagina deja de funcionar

asmodeus dijo...

Esto de ajax no tiene nada.