Olá pessoal sejam bem vindos a mais um artigo sobre Ajax, pretendo mostrar nesse artigo como fazer upload de arquivos com Ajax para auxiliar nesse exemplo vou usar duas bibliotecas jQuery e Ajaxupload.
As vantagens de fazer upload de arquivos com Ajax seria da sua implementação e possível utilização de qualquer recurso de Ajax do ASP.NET que não vai interferir no upload.
Para começar o desenvolvimento do nosso exemplo crie um projeto do tipo Web e adicione a biblioteca jQuery e Ajaxupload segue abaixo os links para download.
- AjaxUpload:http://valums.com/files/2009/ajax-upload/ajaxupload.3.6.js
- jQuery:http://code.jquery.com/jquery-1.4.4.min.js
Depois que fazer o download inclua as duas bibliotecas no projeto e crie agora um WebService do tipo Handler.ashx com nome de upload.
Esse handler será responsável por recuperar do HttpContext nossa requisição e salvar arquivo no diretório desejado como mostra abaixo.
public void ProcessRequest(HttpContext context)
{
if (context.Request.Files.Count > 0)
{
string path = context.Server.MapPath("~/upload/");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
HttpPostedFile postFile = context.Request.Files[0];
postFile.SaveAs(path + postFile.FileName);
context.Response.ContentType = "text/plain";
context.Response.Write("Sucesso");
}
}A função do nosso handler é bem simples recuperar do Context o arquivo verificar se existe o diretório e salvar o arquivo.
O segundo passo agora e acrescentar a chamada do ajaxupload e colocar na nossa página input do tipo file.
<script type="text/javascript">
$(document).ready(function () {
var interval = 0;
var options = {
action: 'upload.ashx',
autoSubmit: true,
onSubmit: function (file, ext) {
{
var button = $('#msg')
button.text('Uploading');
this.disable();
interval = window.setInterval(function () {
{
var text = button.text();
if (button.text().length < 13) {
{
button.text(button.text() + '.');
}
} else {
{
button.text('Uploading');
}
}
}
}, 200);
}
},
onComplete: function (file, response) {
var button = $('#msg')
button.text(response.toString());
button.removeClass('hover');
window.clearInterval(interval);
this.enable();
}
};
new AjaxUpload('#myFileUpload', options);
});
</script>E acrescente o HTML abaixo e execute a aplicação.
<input id="myFileUpload" type="file" />
<p id="msg"></p>
De forma simples criamos um sistema de upload de arquivos com Ajax espero que tenham gostado até a próxima.
