Múltiplos uploads com asp.net + jquery
Pesquisando a respeito de como fazer múltiplos uploads em asp.net, me deparei com o um excelente tutorial em inglês: Upload Multiple Files in ASP.NET using jQuery, resolvi traduzi-lo e dar uma customizado em alguns detalhes.
Criei um web site no VS 2008 framework 2.0. No link do tutorial em inglês encontra-se os links necessários dos scripts e projetos, porem, basta clicar aqui e efetuar o download do meu projeto de exemplo que contem todos os arquivos necessários.
1 – Criei um novo web site: “File > New > Web Site …”, agora crie as seguintes pastas: imagens, img, js. Dentro da pasta js crie a pasta: multiple_upload (essa estrutura é opcional), deve ficar igual a imagem abaixo.
2 – Na pasta img adicione a imagem “deletar.gif”, na pasta multiple_upload adicione os arquivos “jquery-1.3.2.js” e “jquery.MultiFile.js”. Esses arquivos podem ser encontrados no projeto que disponibilizei para download.
3 – No arquivo Default.aspx adicione o código(explicarei sobre o código logo abaixo do mesmo):
<head runat="server">
<title>Upload múltiplo | asp.net + jquery</title>
<script src="js/multiple_upload/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/multiple_upload/jquery.MultiFile.js" type="text/javascript"></script>
<style type="text/css">
.divUpload{height:150px; width:400px; padding:5px; overflow:auto; border:solid 1px #333333}
.mensagem{margin:0px; height:22px}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="divUpload">
<asp:FileUpload ID="fileUp" runat="server" class="multi" />
</div>
<p class="mensagem">
<asp:Label ID="lblMensagem" runat="server" Visible="false"></asp:Label>
</p>
<asp:Button ID="btnUpload" runat="server" Text="Upload todos" onclick="btnUpload_Click" />
</form>
</body>
Não há nada d+ nesse código, no head colocamos as referencias para os scripts que estão na pasta “js/multiple_upload”, logo abaixo temos um pequeno css para o bloco de upload, dentro do body temos um FileUpload, um label para dizer ao usuário quantos arquivos foram adicionados e um botão para enviar os arquivos.
4 – Agora no arquivo Default.aspx.cs, vamos adicionar o evento click do botão e colocar dentro dele o código para o upload dos arquivos, deve ficar algo parecido com isso:
protected void btnUpload_Click(object sender, EventArgs e)
{
int cont = 0;
try
{
HttpFileCollection hfc = Request.Files;
for (int i = 0; i < hfc.Count; i++)
{
HttpPostedFile hpf = hfc[i];
if (hpf.ContentLength > 0)
{
hpf.SaveAs(Server.MapPath("~/imagens/" + hpf.FileName));
}
cont++;
}
if (cont > 0)
{
lblMensagem.Visible = true;
lblMensagem.Text = cont.ToString() + " arquivos adicionados.";
}
}
catch (Exception ex)
{
lblMensagem.Visible = true;
lblMensagem.Text = "Ops! Algo deu errado!";
}
}
O sistema de upload funciona da seguinte maneira, toda a vez que se busca um arquivo pelo fileupload, o javascript adiciona outro controle fileupload na tela em cima do que já existe, então temos a impressão de sempre usar o mesmo fileupload. Então usamos a classe HttpFileCollection que disponibiliza acesso, como uma coleção de ficheiros, a todos os ficheiros que são transferidos. Caso a página permita a transferência de mais de um ficheiro (recorrendo a vários controles fileupload), então esta coleção pode ser percorrida para obter informação sobre cada um dos ficheiros. Já a classe HttpFileCollection Fornece Acesso a arquivos individuais que foram carregados por um cliente. Então criei um loop para percorrer a coleção de ficheiros e adicioná-los um a um na pasta “imagens”. Usamos um contador para mostrar o resultado para o usuário.
5 – Muito bem, o sistema já está pronto, agora vamos customizar um pouco as saídas dos scripts (traduzir as mensagens de inglês para português e melhorar um pouco a exibição dos arquivos adicionados). No arquivo jquery.MultiFile.js, vá até a linha de número 295, e deixe o código assim:
//CÓDIGO NOVO
r = $('<div style="font-size: 13px; padding: 2px; text-align: left; border-bottom: solid 1px #cccccc" class="MultiFile-label"></div>'),
v = String(slave.value || ''/*.attr('value)*/),
a = $('<span class="MultiFile-title" title="'+MultiFile.STRING.selected.replace('$file', v)+'">'+MultiFile.STRING.file.replace('$file', v.match(/[^\/\\]+$/gi)[0])+'</span>'),
b = $('<span> - </span><a class="MultiFile-remove" title="Remover" href="#'+MultiFile.wrapID+'"><img alt="Remover" style="border: 0px; vertical-align: bottom" width="15" height="15" src="img/deletar.gif">'+/*Remover+MultiFile.STRING.remove+'*/'</a>');
//CÓDIGO ANTIGO
//r = $('<div class="MultiFile-label"></div>'),
//v = String(slave.value || ''/*.attr('value)*/),
//a = $('<span class="MultiFile-title" title="'+MultiFile.STRING.selected.replace('$file', v)+'">'+MultiFile.STRING.file.replace('$file', v.match(/[^\/\\]+$/gi)[0])+'</span>'),
//b = $('<a class="MultiFile-remove" href="#'+MultiFile.wrapID+'">'+MultiFile.STRING.remove+'</a>');
// Insert label
MultiFile.list.append(
//CÓDIGO NOVO
r.append(a, ' ', b)
Agora vá na linha 497:
//CÓDIGO NOVO
STRING: {
remove:'x',
denied:'You cannot select a $ext file.\nTry again...',
file:'$file',
selected:'Arquivo selecinado: $file',//File selected:
duplicate:'Esse arquivo ja foi selecionado.\n$file'//This file has already been selected:
},
//CÓDIGO ANTIGO
//STRING: {
//remove:'x',
//denied:'You cannot select a $ext file.\nTry again...',
//file:'$file',
//selected:'File selected: $file',
//duplicate:'This file has already been selected:\n$file'
//},
Observe que eu comentei os códigos originais e fiz umas modificações no html gerado pelo javascript, comente a modificação e depois tire o comentário do código antigo para ver a diferença.
Bom, é isso, até o a próxima!
Ricardo Moura - BLOG 