Upload Simples AJAX,JQUERY e ASP.NET

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (1)  (0)

Nesse artigo irei fazer uma simples descrição de como fazer um upload da maneira mais simples possível usando Ajax, JQUERY e Asp.NET. Motivos do tutorial: O componente de asp:FileUpload> do .NET não faz upload usando ajax, lógica ele quebra a página! Existe soluções alternativas como a utilização de triggers com update panel, mas de qualquer forma ele vai recarregar a página.

crie um página .aspx

coloque um campo de texto do tipo :
    <input type=\”file\” id=\”upfile\”/>
 
 você vai precisar da jquery e jquery ajax fileupload

bom agora é só colocar o javascript:

exemplo de código abaixo:

<%@ page language=\”c#\” masterpagefile=\”~/template/template.master\” autoeventwireup=\”true\”
    codebehind=\”pergunta.aspx.cs\” inherits=\”sitepadrao.participe.pergunta\” %>
 
<asp:content id=\”content1\” contentplaceholderid=\”head\” runat=\”server\”>
 
<script src=\”../scripts/js_participe.js\” type=\”text/javascript\”></script>
 
<script src=\”../scripts/ajaxupload.js\” ype=\”text/javascript\”></script>
 
<script language=\”javascript\” type=\”text/javascript\”>
<script src=\”../scripts/jquery.js\” type=\”text/javascript\”></script>
 
 
    <script language=\”javascript\” type=\”text/javascript\”>
        var caminhofoto;
        function changeimage(objfile) {
 
            //  ajaxfileupload(objfile);
        }
        $(document).ready(function() {
 
        
 
            new ajaxupload('#upfile', {
                //action: 'upload.php',
                action: '../util/filehandler.ashx?file=upfile',
                name: 'myfile',
                oncomplete: function(file, resposta) {
                    alert(resposta);
 
 
                }
            });
        });
    </script>
 
 
</asp:content>
<asp:content id=\”content2\” contentplaceholderid=\”conteudo\” runat=\”server\”>
                <input type=\”file\” id=\”upfile\” />
</asp:content>

quando um onchange for dado no arquivo ele chamará o arquivo do tipo handler ashx que fará o upload no servidor. veja abaixo como criar esse arquivo.

vá em add new item


e no filehandler.ashx faça sua lógica:

exemplo de lógica
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.services;
using system.configuration;
using system.threading;
using system.io;
 
namespace sitepadrao.util
{
    /// <summary>
    /// summary description for $codebehindclassname$
    /// </summary>
    [webservice(namespace = \”http://tempuri.org/\”)]
    [webservicebinding(conformsto = wsiprofiles.basicprofile1_1)]
    public class filehandler : ihttphandler
    {
 
        public void processrequest(httpcontext context)
        {
            try
            {
 
 
             // OBTÉM O NOME DO ARQUIVO
                string nome = path.getfilename(context.request.files[0].filename);

              // GERA UM NOME ALEATÓRIO PARA O ARQUIVO para que não
                string filename = (datetime.now.tostring(\”dd_mm_yyyy_s\”) + (new random()).next(0, 10000) + nome).replace(\” \”, \”\”);

                string caminhoasersalvo =  Context.Server.MapPath("~/uploads/" + filename);
 
               //Salva o arquivo em disco no servidor
                context.Request.Files[0].SaveAs(caminhoasersalvo);
 
                context.Response.clear();
                context.Response.contenttype = \”text/plain\”;
                context.Response.write(filename);
  context.Response.End();
 
            }
            catch (exception ex)
            {
 
                context.response.clear();
                context.response.write(\”[resultado]erro[resultado]\”);
                context.response.end();
            }
        }
 
        public bool isreusable
        {
            get
            {
                return false;
            }
        }
    }
}
 
bom galera espero ter ajudado com este tutorial simples de como fazer um upload com jquery, ajax e .net.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?