Artigos Canal Mais Upload de imagens em ASP.NET
Olá pessoal, neste artigo demonstro como realizar o upload de imagens em ASP.NET, salvando-as em uma pasta física. Acompanhem:

Introdução

Em uma série de artigos feita tempos atrás abordei como fazer o upload de imagens e gravá-las no banco de dados. Mas como em muitos casos as imagens não costumam serem gravadas no banco e sim na própria aplicação, em uma determinada pasta física, resolvi fazer este artigo.

Dito isto, crie uma aplicação Web, adicione a ela uma pasta, chamada Imagens e, na Default.aspx, adicione o controle FileUpload, necessário para ser feito o upload das imagens, além de mais alguns controles, como a Figura 01 ilustra.

Layout da página
Figura 01 - Layout da página

Note a presença do controle ListBox na página, ele será usado mais a frente. O nome Gravar Imagens não é o mais indicado para o botão, já que iremos apenas fazer o upload da imagem em uma pasta física, mais para fins didáticos deixarei este nome.

A Listagem 01 ilustra a codificação deste botão, onde é feito o upload da imagem.

Listagem 01 - Upload da imagem para uma pasta física 

protected void btnGravar_Click(object sender, EventArgs e)
        {
            var mensagem = string.Empty;
            if (this.fupImagem.HasFile)
            {
                this.fupImagem.SaveAs(Server.MapPath("Imagens/" + fupImagem.FileName));
                mensagem = "Imagem gravada com sucesso!";
            }
            else
                mensagem = "Selecione uma imagem!";
                
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Mensagem", "alert(' " + mensagem + "')", true);
        }
Repare que, com poucas linhas de código, fazemos o upload da imagem para a pasta Imagens. Note também que é utilizado o método MapPath para se referenciar a pasta física do projeto.

É salvo na pasta como nome da imagem, o atributo FileName do FileUpload, que “pega” o nome exato da imagem, sem a extensão.

A Figura 02 ilustra as imagens na pasta Imagens.

Pasta Imagens
Figura 02 - Pasta Imagens

Vamos agora adicionar um botão ao formulário, abaixo do Gravar Imagens. Dê a esse botão o nome Ver Imagens. Ainda no modo Design, clique na SmartTag do ListBox e cheque a opção Enable AutoPostBack. Agora clique nos eventos do ListBox, no canto direito, em Propriedades, e dê dois cliques no evento SelectedIndexChanged.

A Listagem 02 exibe a codificação do botão Ver Imagens. Note que não está sendo usado nenhum tratamento de erro, visto que o objetivo aqui não é esse, mais de qualquer forma você não deve se esquecer de sempre usá-lo em seus projetos.

Listagem 02 - Exibição do nome da imagem no ListBox 

protected void btnVerImagens_Click(object sender, EventArgs e)
        {
            var nomes = new List<String>();
            var caminhoImagens = Server.MapPath("Imagens");
            foreach (var item in Directory.GetFiles(Server.MapPath("Imagens")))
            {
                nomes.Add(item.Replace(caminhoImagens + "\\", string.Empty));
            }
            if (nomes != null && nomes.Count > 0)
            {
                this.ListBox1.DataSource = nomes;
                this.ListBox1.DataBind();
            }
        }
Notem que são utilizados duas variáveis auxiliares, uma é uma lista de Strings que é passada como DataSource para o ListBox. A outra é o caminho físico até chegar na pasta Imagens. Logo após é executado um laço foreach, percorrendo os arquivos contidos na pasta Imagens (lembre-se de declarar o namespace System.IO, para usar o método Directory) e, dentro do laço, é usado a variável auxiliar nomes, adicionando nela o nome da foto, retirando todo o caminho anterior, por meio do método Replace.

Para entender melhor o resultado, rode a aplicação e faça os testes. O nome de suas imagens deve estar como ilustrado pela Figura 03.

Nome das imagens sendo exibidas no ListBox
Figura 03 - Nome das imagens sendo exibidas no ListBox

Assim não é exibido todo o caminho físico completo até chegar na pasta Imagens.

Agora adicione uma nova página, chamada Imagens.aspx. Nela, adicione dois controles: 1 Image e 1 HyperLink. No HyperLink você pode adicionar a propriedade NavigateUrl, apontando para a Default.aspx, e colocar um Text, com o valor Voltar.

Esta página será chamada para visualizar a imagem, de acordo com a que for selecionada lá no ListBox da Default.aspx.

Se lembra do evento SelectedIndexChanged? Então, o usaremos agora. Volte a página de códigos da Default.aspx e faça a codificação nesse evento, ilustrado pela Listagem 03.

Listagem 03 - Evento SelectedIndexChanged, do ListBox 

protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
        {
            Response.Redirect("Imagem.aspx?IdImagem=" + this.ListBox1.SelectedItem.Text);
        }
É chamado a página Imagem.aspx, passando via QueryString, o nome da imagem, contando com sua extensão (a QueryString seria montada como “IdImagem=02.jpg”). Agora basta ir a página Imagem.aspx e codificar o evento Load da página para que, ao carregar a página, seja verificado se há valor na QueryString (o usuário pode digitar “na mão” a URL sem passar o ID da imagem) e, se houver valor, basta carregar a imagem, passando seu caminho para o controle Image, criado anteriormente.

A codificação para isso está ilustrada na Listagem 04.

Listagem 04 - Codificação para exibir a imagem no controle 

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (Request.QueryString["IdImagem"] != null)
                    this.imgImagem.ImageUrl = "~/Imagens/" + Request.QueryString["IdImagem"].ToString();
            }
        }
O resultado pode ser visto na Figura 04.

Exibição da Imagem
Figura 04 - Exibição da Imagem

Disponibilizo o código-fonte a quem se interessar neste artigo.

Assim finalizo o artigo. Muito obrigado a todos!

Um abraço, e até o próximo artigo.

Wellington Balbo de Camargo