Engenho & Engenhocas: AJAX

HMTL5, AJAX e ASP.NET e o carregamento de ficheiros

Para ler

index.html


<html>
<body>

<form action="FileUploader.ashx" enctype="multipart/form-data" id="upload" method="POST">

<fieldset>

<input id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" type="hidden" value="300000" />

<div>
    <label for="fileselect">Ficheiros para carregar:</label>
    <input id="fileselect" multiple="multiple" name="fileselect[]" type="file" />
</div>

<div id="submitbutton">
 <button type="submit">>Carrega os meus ficheiros</button>
</div>

</fieldset>

</form>

<div id="progress">
</div>

<div id="messages">
Mensagens de estado</div>

<script src="filedrag.js"></script>

</body>
</html>

FileUploader.ashx


public class FileUploader : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
   if (context.Request.Files.Count > 0)
   {
       HttpFileCollection files = context.Request.Files;
       for (int i = 0; i < files.Count; i++)
       {
           HttpPostedFile file = files[i];
           ////// Aqui o código necessário
       }
   }

   context.Response.ContentType = "text/plain";
   context.Response.Write("Ficheiros carregados com sucesso.");
}

public bool IsReusable
{
   get
   {
       return false;
   }
}

}

O JavaScript responsável pelo tratamento assíncrono do carregamento dos ficheiros foi desenvolvido através do objecto XMLHttpRequest.
No exemplo acima pode ver-se o markup e o código servidor que processa o carregamento de vários ficheiros num único pedido.

O JavaScript filedrag.js que trata da parte cliente e submete os ficheiros para o servidor foi desenvolvido por Craig Buckler (@craigbuckler) da OptimalWorks.net. O artigo original está aqui.
Este JavaScript também está preparado para drag & drop de ficheiros, abertura de ficheiros com HTML5 e JavasScript e carregamento de ficheiros com barra de progresso.

Estoutro artigo também detalha o uso de AJAX para carregamento de ficheiros.

Ambos usam e não o ASP.NET como este artigo.

fonte:
How to Asynchronously Upload Files Using HTML5 and Ajax
Uploading Files with Ajax

Ler mais Comentar