Upload Simples AJAX,JQUERY e ASP.NET
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\”/>
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.
|
PARA QUEM QUER SER
PROGRAMADOR DE VERDADE.
VAGAS LIMITADAS
PROGRAMADOR DE VERDADE.
VAGAS LIMITADAS
de: R$ 658,80
por: 12x R$ 49,90
Plano PRO
- Acesso completo
- Projetos reais
- Professores online
- Exercícios gamificados
- Certificado de autoridade

Por
Pedro
Em 2009