Upload de arquivos : Ajax e jQuery em asp.net

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.

Upload de arquivos : Ajax e jQuery em asp.net

Nesse artigo ensino como fazer upload de arquivos com ajax utilizando webservice e jquery.

Artigos relacionados